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}}" />
// 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。