今天在项目中遇到一个需求是将生成的二维码和一些配景作为海报，，然后将海报以图片的形式下载

使用了 html2canvas  插件

import html2canvas from "html2canvas";

<div v-for="(item,index) in qrcodeList" :key="index"> <div :id="item.refname" :class="item.bgimg"> <div> <div>问卷标题</div> <img :src="qrcodeimg" > <div>问卷工厂供给技术撑持</div> </div> </div> <span @click="downLoadCode(item.refname,‘问卷海报‘)">下载</span> </div>

　　这是要执行的 代码片段

downloadFile(data, fileName) { if (!data) { return; } let url = window.URL.createObjectURL(data); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute("download", fileName); document.body.appendChild(link); link.click(); }, downLoadCode(id,name){ html2canvas(document.getElementById(id),{useCORS:true,logging:true}).then(canvas => { canvas.toBlob(blob => { this.downloadFile(blob,name); }, "image/png"); }); },

　　如果要下载的部分有图片内容  需要 添加 

{useCORS:true,logging:true} 允许跨域   否则图片的部分会是空白的

使用 html2canvas 将页面中某一部分转为图片下载