1、安装
npm install --save html2canvas
2、在需要使用的vue组件中引入html2canvas
import html2canvasfrom"html2canvas"
3、在要截取的区域添加ref标记
<div ref="toImg"></div>
/**
* 将页面ref指定节点的区域内容转为图片
* 1.拿到想要转换为图片的内容节点DOM；
* 2.转换，拿到转换后的canvas
* 3.转换为图片
*/
generatePic() { //生成图片
html2canvas(this.$refs.toImg).then(canvas => {
// 转成图片，生成图片地址
let imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
});
}
4、PC端保存生成的图片
downloadFile (fileName, content) {
let aLink = document.createElement('a');
let blob = this.base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
},
base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
5、问题
（1）网络图片截取是跨域问题
{ allowTaint: true, useCORS: true }
html2canvas(this.$refs.toImg, {allowTaint: true}).then(canvas => { // append canvas to page });
（2）textarea标签 多行文字变成一行文字截取不全；
可以使用span标签替换使用
