vue多个文件打包成zip压缩包

最新推荐文章于 2024-09-05 13:47:34 发布

时无诳语Imp

最新推荐文章于 2024-09-05 13:47:34 发布

阅读量603

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54930261/article/details/131601070

版权

该代码段展示了一个JavaScript函数，用于将多个canvas元素中的二维码图片转换为jpg格式，存储到zip文件中，并利用FileSaver库让用户下载这个包含所有二维码的.zip文件。过程中涉及到base64转blob的转换操作。

摘要由CSDN通过智能技术生成

downloadClick() {
        const zip = new JSZip();
        const promises = [];
        this.downloadimgs.forEach((item) => {    //this.downloadimgs为保存的数据
          // 先找到canvas节点下的二维码图片
          const myCanvas = document
            .getElementById(item.id)
            .getElementsByTagName('canvas');
          // 创建一个a节点
          const a = document.createElement('a');
          // 设置a的href属性将canvas变成png格式
          const imgURL = myCanvas[0].toDataURL('image/jpg');
          a.download = item.id + '.jpg';
          const blob = this.base64ToBlob(imgURL);
          const promise = zip.file(a.download, blob, { binary: true }); //文件名、文件流、是否为二进制
          promises.push(promise);
        });
        Promise.all(promises).then(() => {
          zip.generateAsync({ type: 'blob' }).then((content) => {
            // 生成二进制流
            FileSaver.saveAs(content, '二维码.zip'); // 利用file-saver保存文件
          });
        });
      },
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      },