angular2中使用html2canvas将数据导出为图片，并下载本地

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 => {
            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,null);
        oA.dispatchEvent(event);
    }
    
    
    // 方法调用
    saveImgLocal() {
        this.downloadFile("导出图片",this.canvasImg);
    }

5、下载

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!