jszip压缩图片file-saver批量导出空文件夹以及有损图片问题解决

1.需求：

所有设备的二维码单个下载很麻烦需要批量导出

2.问题

2.1使用DataURl格式生成zip

按照jszipAPI 官方示例使用 DataURl导出的是空文件夹

How to write a file / give it to the user

// canvsa转化为blob类型；在使用FileReader转化为DataURI 然后压缩到jszip
canvasContent.toBlob((blob) => {let reader = new FileReader()reader.readAsDataURL(blob)reader.addEventListener('loadend',()=> {// replace（）替换掉多余的描述部分 不然jszip会报错说这个可能是DataURLlet DataURI = reader.result.replace(/^data:image\/(png|jpg);base64,/, "")zip.file(file_name, DataURI , { base64: true })})})zip.generateAsync({ type: "base64" }).then( (base64) => {location.href = "data:application/zip;base64," + base64;});

不适用replace 替换多余描述部分报错图：

2.2使用Blob格式生成zip

根据jsZip 文档说明传入canvas.toBlob()生成的Bolb类型文件生成的图片破损无法使用

点开是下面这样：

问题就出现在HTMLCanvasElement.toBlob() 这个方法这个方法转化出来的Blob类型数据使用jsZip压缩后图片破损，使用自己封装的DataUrl 转 Blob 数据生成图片没有问题可以显示

MDN 关于 toBlob 方法的描述：

HTMLCanvasElement.toBlob() - Web API 接口参考 | MDN

3.问题解决

调用Canvas的toBlob生成的blob数据jszip压缩成图片会损坏；

使用自己封装的转化Bolb方法再去压缩没有问题；

经过测试比对两者生成的Blob对象大小一样但是手写DataToBlob方法可以生成正确图片

原本猜测可能是由于toBlob()方法的异步导致但是经过包装Promise 后测试发现不是这个问题

        // 获取canvasDomconst canvasContent = qrCode.querySelectorAll("canvas")[1];const imgurl = canvasContent.toDataURL("image/png");let blob = dataURLtoBlob(imgurl)console.log(blob, 'custom DataToBlob');canvasContent.toBlob((blob) => {console.log(blob, 'toBlob()生成');})

3.完整代码

       // 批量生成二维码mutiplyQrcode() {if (!this.currentChecked.length) return this.$message.info('请选择操作项')const zip = new JSZip()this.currentChecked.forEach(item => {let { teId, teNo, teName } = itemlet file_name = '设备' + teNo + '.png'let qrCode = this.generatorQrcode(teId, teNo, teName)//拿到canvas Domconst canvasContent = qrCode.querySelectorAll("canvas")[1];//转化为DataURLconst imgurl = canvasContent.toDataURL("image/png");//转化为Bolblet blob = this.dataURLtoBlob(imgurl)zip.file(file_name, blob, { binary: true })})zip.generateAsync({type: "blob"}).then(content => { // 生成二进制流saveAs(content, "设备二维码.zip") // 利用file-saver保存文件})},dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });},// 这个只是canvas生成二维码的方法可以不需要看generatorQrcode(teId, teNo, teName) {let qrcodeContent = document.createElement("div");qrcodeContent.width = '400px'qrcodeContent.height = '400px'let qrcodeCanvas = new QRCode(qrcodeContent, {// text: row.teQrCodeValue, // 需要转换为二维码的内容text: this.$qrCodeUrl + "#/maintain-equipment-detail/" + teId, // 需要转换为二维码的内容//   text: String(this.dialogData.teId), // 需要转换为二维码的内容width: 400,height: 400,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H,});var resolutionMultiple = 1; // 分辨率倍数var borderSize = 5 * resolutionMultiple; // 边框留白var canvasWidth = 500 * resolutionMultiple; // 图片宽度var text = teNo + '-' + teName; // 底部文字var fontSize = 32 * resolutionMultiple; // 文字大小var canvasHeight = canvasWidth + fontSize;var canvas = document.createElement("canvas");if (!canvas.getContext) return;canvas.width = canvasWidth;canvas.height = canvasHeight;var ctx = canvas.getContext("2d");ctx.fillStyle = "rgb(255,255,255)"; // 调色(纯白)ctx.fillRect(0, 0, canvasWidth, canvasHeight); // 绘制背景var qrcodeSize = canvasWidth - borderSize * 2;ctx.drawImage(qrcodeContent.querySelector("canvas"),borderSize,borderSize,qrcodeSize,qrcodeSize); // 填充二维码ctx.fill(); // 填充背景ctx.fillStyle = "rgb(0,0,0)"; // 调色(纯黑)ctx.font = fontSize + "px Arial"; // 文本大小, 字体ctx.textAlign = "center";ctx.fillText(text,canvasWidth / 2,qrcodeSize + borderSize + fontSize,qrcodeSize); // 绘制文本// 清除原二维码qrcodeCanvas.clear()qrcodeContent.appendChild(canvas);return qrcodeContent}

4.API参考

jszip API JSZip API