批量生成二维码，并批量合成为海报导出

项目需求：批量导出报名二维码海报

思路：

1、根据后台返回的Url 生成二维码

2、把二维码 、内容、背景批量合成为海报

3、导出合成海报的压缩包文件

第一步：安装qrcode、html2canvas、jszip、file-saver 插件

npm install --save qrcode
npm install --save html2canvas
npm install --save jszip
npm install --save file-saver

 第二步：页面引入 

import QRCode from 'qrcode'
import html2canvas from "html2canvas"
import JSZip from 'jszip'
import FileSaver from "file-saver"

第三步：使用

后台返回接口结构：

 页面按钮：

导出报名二维码

 需要合成海报的html展示：html2canvas 将html的dom结构生成图片，所以需要先展示出来，但是默认用户是看不到的，在页面的最下方

课程名称：{{codeData.lesson.name}}班级名称：{{item.class_name}}开课时间：{{item.started_at==''?'待定':`${item.started_at}`.substring(0,10)}}报名截止：{{item.final_paid_at==''?'待定':`${item.final_paid_at}`.substring(0,10)}}

.codePanel {padding-top: 9999px;}

导出时进度条弹窗：默认不允许用户关闭弹窗

导出中，请不要关闭页面
导出完成
关闭弹窗

 js部分：

export default {data() {return {//批量合成海报下载codeData: '', //当前选中要下载的数据imgI: 0, //当前合成的海报imglist: [], //已合成海报列表codelist: [], //二维码列表loadDialog: false, //海报合成进度弹窗loadprogress: 0, //海报合成进度loadOK: true, //压缩包下载是否完成 完成后状态为false（这里是按钮是否可点击的状态）}},

exportCanvas(data) { //导出海报二维码this.loadDialog = truethis.imgI = 0this.imglist = []this.codelist = []this.loadprogress = 0			this.getCode(data) //生成二维码},// 合成二维码getCode(data) {this.$nextTick(() => {data.term_urls.forEach((item, index) => {QRCode.toDataURL(item.url).then(url => {console.log(url)this.codelist.push(url)if (index+1==data.term_urls.length) {this.codeData = dataconsole.log('生成二维码结束，合成海报')this.getCanvas()							}}).catch(err => {console.error(err)})});}, 500)},//合成海报getCanvas() { this.$nextTick(() => {let _this = this;this.imgI++html2canvas(document.getElementById("code_" + this.imgI), {useCORS: true}).then(canvas => {var url = canvas.toDataURL("image/png");this.imglist.push(url)this.loadprogress = Math.floor((this.imgI / this.codeData.term_urls.length) * 100) //已合成除以总张数if (this.imgI > this.codeData.term_urls.length) {} else {this.getCanvas()}}).catch((e) => {console.log('合成完毕，准备下载')this.downImg()});});},// 合成海报批量下载downImg() {let _this = this;let zip = new JSZip();let zipName = _this.codeData.school_name;let images = this.imglistfor (let i = 0; i < images.length; i++) {var fliename = _this.codeData.term_urls[i].class_namelet imageFile = images[i].replace(/^data:image\/(png|jpg|jpeg);base64,/, "");zip.file(`${fliename}.jpg`, imageFile, {base64: true})}zip.generateAsync({type: "blob"}).then(content => {FileSaver.saveAs(content, zipName);this.loadOK = falsethis.codeData=''}).catch((res) => {alert("文件压缩失败");});},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！