vue签字之后生成一张图片_vue下页面生成图片功能

目前主流的两种方式网页生成图片的插件

Install NPM

npm install --save html2canvas

Install Yarn

yarn add html2canvas

引入方式ES6

import html2canvas from "html2canvas";

常见问题：

出现滚动条，只截取到可视区域的页面

解决方法： 克隆一个需要生成图片的DOM对象

//解决截屏时，滚动条隐藏部分不能截取问题

const tableWidth = this.$refs.custom_table.$refs.cTable.bodyWidth; // 具体内容的宽度

const tableHeight = this.$refs.custom_table.clientHeight; // 具体内容的高度

const targetDom = document.querySelector(".imgArea");

let copyDom = targetDom.cloneNode(true);

copyDom.style.width = tableWidth;

copyDom.style.height = tableHeight;

document.querySelector("body").appendChild(copyDom);

调用方法生成图片下载

// options 参数设置参照文档说明

const options = { useCORS: true, backgroundColor: null }

html2canvas(copyDom,options ).then(

canvas => {

//document.body.appendChild(canvas);

this.imgURL = canvas.toDataURL("image/png");

//必须同源(访问的网站域名与服务器域名一致)才能下载

const eleLink = document.createElement("a");

eleLink.href = this.imgURL; // 转换后的图片地址

eleLink.download = +new Date() + "_实时采集数据";

document.body.appendChild(eleLink);

// 触发点击

eleLink.click();

// 然后移除

document.body.removeChild(eleLink);

document.body.removeChild(copyDom);

}

);

具体用法点击 插件名称进入到官方有使用样例。

出现滚动条和html2canvas解决方式一样

domtoimage.toJpeg(copyDom).then(function(dataUrl) {

const eleLink = document.createElement("a");

eleLink.href = dataUrl; // 转换后的图片地址

eleLink.download = +new Date() + "_实时数据.jpeg";

document.body.appendChild(eleLink);

// 触发点击

eleLink.click();

// 然后移除

document.body.removeChild(eleLink);

});