生成二維碼壓縮文件

https://pan.baidu.com/s/1_m3ZYTtDhXFUDCXaX2u1Uw
依賴地址（提取碼:Lazy）

引入文件

<script src="./js/jszip.min" type="text/javascript" charset="utf-8"></script> <script src="./js/filesaver.min" type="text/javascript" charset="utf-8"></script> <script src="./js/jquery-3.6.0.min" type="text/javascript" charset="utf-8"></script> <script src="./js/qrcode.min" type="text/javascript" charset="utf-8"></script>

創建一個全局畫布

var canvas = document.createElement('canvas'); //創建一個全局畫布canvas.width = 300; //設置畫布的寬和高canvas.height = 400;var ctx = canvas.getContext('2d'); //畫筆

生成打包

async saveSome(list) { //生成多個并打包下載到本地for (let i = 0; i < list.length; i++) {let item = list[i];await this.draw(item); //等待繪圖await this.addToZip(canvas, zip, item.stuName + ".png"); //等待加入zip文件}this.createZip() //創建ZIP文件},

創建，繪圖，下載

draw(item) { //繪制二維碼及名字標識return new Promise((resolve, reject) => {var div = document.createElement('div');var qrcode = new QRCode(div, { //繪制二維碼text: item.qrcode, //二維碼名字，可以看出來區別width: 250,height: 250,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H});let mc = div.querySelector('canvas');ctx.beginPath(); //開始繪制ctx.fillStyle = '#FFFFFF';ctx.fillRect(0, 0, 300, 400) //填充底色ctx.drawImage(mc, 25, 25) //繪制二維碼ctx.font = "bold 45px 微軟雅黑";ctx.textAlign = "center";ctx.textBaseline = "middle";ctx.fillStyle = '#000000';ctx.fillText(item.stuName, 150, 350) //繪制文字在底部ctx.closePath(); //結束繪制resolve();})},async createZip() { //下載zip文件到本地zip.generateAsync({type: 'blob'}).then(function(content) {saveAs(content, `XXX_${new Date().getTime()}.zip`);});},addToZip(canvas, zip, name) {return new Promise((resolve, reject) => {canvas.toBlob(function(blob) {zip.file(name, blob); // 將每次不同的canvas數據添加到zip文件中resolve();});})},

調用函數

getQRCode(data).then(res => {this.saveSome(res.data).then(res => {setTimeout(function(){location.reload()},2000)})})

總結

以上是生活随笔為你收集整理的生成二维码压缩文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。