vue使用axios、 jszip、 file-saver 打包下载压缩包

安装下载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>