vue前端導出zip包

需求：將多個文件打包成zip壓縮包下載的功能

以下是后台返回的需要下載的文件的數據結構:

//zipName是zip壓縮包的名字，fileUrl是需要下載的文件地址，fileName是文件的名稱

{
    "status": 1,
    "message": "導出成功",
    "data": {
        "zipName": "全部簡歷.zip",
        "filesArr": [ {
            "fileUrl": "https://xxxxxx",
            "fileName": "張亮的簡歷.pdf"
        }, {
            "fileUrl": "https://xxxxxx",
            "fileName": "小明的簡歷.pdf"
        }, {
            "fileUrl": "https://xxxxxx",
            "fileName": "張三.pdf"
        }]
    }
}

 

第一步：下載插件

//jszip是一個用於創建、讀取和編輯.zip文件的JavaScript庫 可以將文件或者圖片打包成一個Zip文件。
npm install jszip

//前端下載, 基於Blob進行下載，
npm install file-saver

 

第二步：在需要用以上插件的頁面中引入：

import JSZip from "jszip";
import FileSaver from "file-saver";

 

第三步：調用代碼

     /***
       * 文件打包
       * filesArr: 需要打包的數據集合：[{fileUrl:文件url, fileName:文件名}]
       * fileName: 壓縮包名稱
       */
      filesToRar(filesArr, zipName) {
        let _this = this;
        let zip = new JSZip();
        let cache = {};
        let promises = [];
        _this.title = "正在加載壓縮文件";
        this.loading = true;
        this.loadingText = _this.title;
        for (let i = 0, len = filesArr.length; i < len; i++) {
          let item = filesArr[i];
          const promise = _this.getFileArrayBuffer(item.fileUrl).then((data) => {
            // 下載文件， 並存儲為ArrayBuffer對象（blob）
            // 逐個添加文件
            zip.file(item.zipName, data, { binary: true });
            cache[item.zipName] = data;
            this.loadingText = _this.title + "  " + filesArr.length + " / " + i;
          });
          promises.push(promise);
        }

        Promise.all(promises)
          .then(() => {
            zip.generateAsync({ type: "blob" }).then((content) => {
              _this.title = "正在壓縮";
              this.loadingText = _this.title;
              // 生成二進制流
              // 利用file-saver保存文件，自定義文件名
              FileSaver.saveAs(content, fileName);
              _this.title = "壓縮完成";
              this.loadingText = _this.title;
              this.loading = false;
            });
          })
          .catch((res) => {
            this.loading = false;
            _this.$message.error("文件壓縮失敗");
          });
      },






      // 獲取文件blob
      getFileArrayBuffer(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();
        });
      },