VUE生成海报（HTML转图片）

效果图如下所示

引用插件，使用插件

//引用插件
npm install qrcodejs2 --save
npm install html2canvas --save

//在需要生成海报的页面使用
import html2canvas from 'html2canvas';
import QRcode from 'qrcodejs2';

生成海报代码

//template
<div class="burr_f-haibao" id="posterHtml" v-if="posterImg == ''">
	<div>测试海报</div>
</div>	
<div class="burr_f-haibao" v-if="posterImg != ''">
	<img style="z-index: 100;" :src="posterImg" />
</div>

//script
data() {
    return {
	  posterImg:'',
    }
 },
 mounted(){
	let that = this
	let domObj = document.getElementById('posterHtml')
	html2canvas(domObj, {
	  useCORS: true,
	  allowTaint: false,
	  logging: false,
	  letterRendering: true,
	  onclone (doc) {
	    let e = doc.querySelector('#posterHtml')
	    e.style.display = 'block'
	  }
	}).then(canvas => {
		that.posterImg = canvas.toDataURL('image/png')
	})
 },

//CSS
.burr_f-haibao{width: 80%;height: 80vh;margin: 3vh 10% 0;float: left;background-color: #000;position: relative;}
.burr_f-haibao>img{width:100%;height:100%;}
.burr_f-haibao>div{font-size: 14px;color: #fff;text-align:center;line-height: 80vh;}

有个注意事项一定要先生成html部分在去转成图片，有必要可以使用setTimeout(function (){},1000)


遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。