标签:fonts display body canvas 标题 lob bsp from his
今天在项目中遇到一个需求是将生成的二维码和一些背景作为海报,然后将海报以图片的形式下载
使用了 html2canvas 插件
<div class="tc" v-for="(item,index) in qrcodeList" :key="index"> <div :id="item.refname" class="poster " :class="item.bgimg"> <div class="poster-dir"> <div class="poster-title fontSize-3">问卷标题</div> <img class="qrcode" :src="qrcodeimg" > <div class="poster-own">问卷工厂提供技术支持</div> </div> </div> <span @click="downLoadCode(item.refname,‘问卷海报‘)" class="konbtn mt10">下载</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"); }); },
如果要下载的部分有图片内容 需要 添加
标签:fonts display body canvas 标题 lob bsp from his
原文地址:https://www.cnblogs.com/buxiugangzi/p/12219448.html