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)

 

 

Logo

前往低代码交流专区

更多推荐