angular2中使用html2canvas将数据导出为图片

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

 

1、安装html2canvas

npm install --save html2canvas

官方网站

https://html2canvas.hertzen.com/

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