轉自：https://segmentfault.com/a/1190000012477096

1、安裝html2canvas

npm install --save html2canvas

2、在需要的元件中引入html2canvas

// 匯入整個模組的內容
import * as html2canvas from 'html2canvas';

3、定義方法，將資料轉換為canvas

// #mainTable是資料表格的id
takeScreenShot() {
        // 使用html2canvas外掛，將資料來源中的資料轉換成畫布。
        html2canvas(document.querySelector("#mainTable"
 
)).then(canvas => {
            // 修改生成的寬度
            canvas.style.width = "1000px";
            console.log(canvas, "生成的畫布檔案");
            this.canvasImg = canvas.toDataURL("image/png");
        });
    }
    
// 然後給初始化的public canvasImg: any = ""; 複製，他就是圖片地址。

// 展示圖片
<img src="{{canvasImg}}" />

4、將圖片下載到本地，定義轉換圖片格式方法。

// filename: 檔名稱， content: canvas圖片流地址
    downloadFile(filename, content) {
        var base64Img = content;
        var oA = document.createElement('a');
        oA.href = base64Img;
        oA.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click'
 
, true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        oA.dispatchEvent(event);
    }
    
    
    // 方法呼叫
    saveImgLocal() {
        this.downloadFile("匯出圖片", this.canvasImg);
    }

5、下載

<button label="下載" pButton (click)="saveImgLocal()"></button>

6、設定畫布大小

var shareContent = document.getElementById("mainTable");//需要截圖的包裹的（原生的）DOM 物件
        var width = shareContent.offsetWidth; //獲取dom 寬度
        var height = shareContent.offsetHeight; //獲取dom 高度
        var canvas = document.createElement("canvas"); //建立一個canvas節點
        var scale = 1; //定義任意放大倍數 支援小數
        canvas.width = width * scale; //定義canvas 寬度 * 縮放
        canvas.height = height * scale; //定義canvas高度 *縮放
        canvas.getContext("2d").scale(scale, scale); //獲取context,設定scale
        var opts = {
            scale: scale, // 新增的scale 引數
            canvas: canvas, //自定義 canvas
            logging: true, //日誌開關
            width: width, //dom 原始寬度
            height: height //dom 原始高度
        };
        html2canvas(shareContent, opts).then(canvas => {
            this.canvasImg = canvas.toDataURL("image/png");
            console.log(canvas)
        });