angular2中使用html2canvas將數據導出爲圖片，並下載本地

一、安裝html2canvas

npm install --save html2canvas

官方網站
https://html2canvas.hertzen.com/

二、在須要的組件中引入html2canvas

// 導入整個模塊的內容
import * as html2canvas from 'html2canvas';

三、定義方法，將數據轉換爲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}}" />

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

// 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);
    }

五、下載

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

六、設置畫布大小

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)
        });