转自：https://segmentfault.com/a/1190000012477096
1、安装html2canvas
1
| npm install --save html2canvas
|
官方网站
https://html2canvas.hertzen.com/
2、在需要的组件中引入html2canvas
1
2
| // 导入整个模块的内容
import * as html2canvas from 'html2canvas';
|
3、定义方法，将数据转换为canvas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // #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、将图片下载到本地，定义转换图片格式方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // 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、下载
1
| <button label="下载" pButton (click)="saveImgLocal()"></button>
|
6、设置画布大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 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)
});
|