vue中使用html2canvas方法，设置背景，字体重叠问题解决方法

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)