安裝下載jszip、file-saver依賴

npm install jszip  npm install file-saver  npm install axios

　　在自己需要的頁面引入

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

　　使用axios下載buffer流

const getFile = (url, callback) => {
  return new Promise((resolve, reject) => {
    axios({
      method: "get", //使用get請求
      url, //放入的文件地址
      responseType: "arraybuffer" //請求的數據buffer對象
       onDownloadProgress: function(progressEvent) { //這一步是下載文件進度條，可以和progress進度條一塊使用，不過多個文件下載會有很丑的動畫，建議同步下載顯示進度條
         // 對原生進度事件的處理
         if (callback) {
           callback(progressEvent);
         }
       }
    })
      .then(data => {
        resolve(data.data);
      })
      .catch(error => {
        reject(error.toString());
      });
  });
};

　　調用上邊的函數

 fileDownLoadHandler() {
      // 需要下載打包的路徑, 可以是本地相對路徑, 也可以是跨域的全路徑
      var that = this;
      var files = that.getData;
      const zip = new JSZip();
      const cache = {};
      const promises = [];
      files.forEach(items => {
        items.orderFiles.forEach(item => {
          var orderName = items.orderName;
          const promise = getFile(item.url, that.progressBar).then(data => {
            // 下載文件, 并存成ArrayBuffer對象
            const arr_name = item.url.split("/");
            const file_name = arr_name[arr_name.length - 1]; // 獲取文件名
            // zip.file(file_name, data, { binary: true }); // 逐個添加文件
            zip.file(orderName + "/" + file_name, data);
            cache[file_name] = data;
          });
          promises.push(promise);
        });
      });
      Promise.all(promises).then(() => {
        console.log("全部下載完成");
        zip.generateAsync({ type: "blob" }).then(content => {
          // 生成二進制流
          console.log("生成壓縮包");
          FileSaver.saveAs(content, "RobotInformation.zip"); // 利用file-saver保存文件  自定義文件名
        });
      });
    },

　　如果想用進度條，可以在下邊設置

    progressBar(progressEvent) {
      // 獲取百分比（此處保留了一位小數）
      let percentage = Number(
        ((progressEvent.loaded / progressEvent.total) * 100).toFixed(1)
      );
      console.log(percentage);
      this.$nextTick(() => {
        this.progressNum = percentage;
      });

      // 讓百分比顯示在界面上
    }

　　

<el-progress :percentage="progressNum"></el-progress>

　　

　　

總結

以上是生活随笔為你收集整理的vue使用axios、 jszip、 file-saver 打包下载压缩包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。