1.安装
npm install html2canvas --save
2.引入
import html2canvas from 'html2canvas'
3.在组件中使用的方法
createImg(){
let dom = document.getElementById("card"); //要转化的div
let width = dom.offsetWidth;
let height = dom.offsetHeight;
html2canvas(dom,{
backgroundColor: null//无背景
}).then(canvas => {
canvas.style.width = width+"px";
canvas.style.height = height+"px";
var image = new Image();
image.src = canvas.toDataURL();
document.getElementById('content_img').appendChild(image)
dom.style.display='none'
});
},
(1)设置无背景方法为{backgroundColor: null} ，设置背景图就是要转换的div的背景图
(2)字体重叠问题解决方法：
给文本设置css { text-align:justify } 或者 {text-align: left}；
文本标点符号需注意，全角和半角也会引起字体重叠，推荐使用全角。
(3)文本数据是接口动态获取，那就需要等数据获取完成之后再转换，用setTimeout延迟：
setTimeout(() => {
this.createImg();
},1000)