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>