vue-图片安装包下载

前言

在下载学员证书的时候，如果学员数量太多，需要下载多张证书，产品要求打包好后下载。

一、用jszip,file-saver进行文件压缩

下载

npm install JSZip
npm install FileSaver

引入

import JSZip from ‘jszip’

import FileSaver from “file-saver”

具体实现

// 下载
      dowloads() {
        let that = this
        that.zipLoading = true
        return new Promise(
          (resolve) => {
            that.finalCanvas = []
            this.certificateList.map((item, index) => {
              let imageWrapper = document.querySelector('#certificateDown' + index);
              html2canvas(imageWrapper, {
                useCORS: true,
                allowTaint: true,//允许跨域图片
                taintTest: false
              }).then(canvas => {
                let dataURL = canvas.toDataURL("image/png");
                that.finalCanvas.push({
                  fileUrl: dataURL,
                  renameFileName: item.comple_templates[0].text + '.png'
                });
                if (that.finalCanvas.length >= that.certificateList.length) {
                  resolve(that.finalCanvas)
                }
              })
            })
          }
        ).then((data) => {
          that.filesToRar(data, '结业证书');
          that.zipLoading = false
        })
      },
      //生成压缩包
      filesToRar(arrImages, filename) {
        let _this = this;
        let zip = new JSZip();
        let cache = {};
        let promises = [];
        _this.title = '正在加载压缩文件';

        for (let item of arrImages) {
          const promise = _this.getImgArrayBuffer(item.fileUrl).then(data => {
            // 下载文件, 并存成ArrayBuffer对象(blob)
            zip.file(item.renameFileName, data, {binary: true}); // 逐个添加文件
            // zip.file(item.renameFileName, data, {base64: true}); // 逐个添加文件
            cache[item.renameFileName] = data;
          });
          promises.push(promise);
        }

        Promise.all(promises).then(() => {
          zip.generateAsync({type: "blob"}).then(content => {
            _this.title = '正在压缩';
            // 生成二进制流
            FileSaver.saveAs(content, filename); // 利用file-saver保存文件  自定义文件名
            _this.title = '压缩完成';
            _this.downLoading.close()
          });
        }).catch(res => {
          _this.$message.error('文件压缩失败');
        });
      },
      //获取文件blob
      getImgArrayBuffer(url) {
        let _this = this;
        return new Promise((resolve, reject) => {
          //通过请求获取文件blob格式
          let xmlhttp = new XMLHttpRequest();
          xmlhttp.open("GET", url, true);
          xmlhttp.responseType = "blob";
          xmlhttp.onload = function () {
            if (this.status == 200) {
              resolve(this.response);
            } else {
              reject(this.status);
            }
          }
          xmlhttp.send();
        });

      },

赏

谢谢你请我吃糖果