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

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
        });
      },

你可能感兴趣的:(vue.js,javascript,前端)