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 => {// 修改生成的宽度canvas.style.width = "1000px";console.log(canvas, "生成的画布文件");this.canvasImg = canvas.toDataURL("image/png");});}// 然后给初始化的public canvasImg: any = ""; 复制，他就是图片地址。// 展示图片

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、下载

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,设置scalevar opts = {scale: scale, // 添加的scale 参数canvas: canvas, //自定义 canvaslogging: true, //日志开关width: width, //dom 原始宽度height: height //dom 原始高度};html2canvas(shareContent, opts).then(canvas => {this.canvasImg = canvas.toDataURL("image/png");console.log(canvas)});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！