VUE前端实现文件的打包下载

当有多个附件时，前端是如何实现附件的打包下载的呢，首先需要安装两个插件，来实现

1.安装file-saver和jszip

npm install file-saver
npm install jszip

2.安装成功之后，在我们需要打包下载的页面引入

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

3.接下来就是我们页面点击的某个操作实现文件的打包下载功能啦

//文件以流的形式获取
getImgArrayBuffer(url) {//url为文件地址
      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();
      });
    },
//点击下载的操作
    download() {
      
      var blogTitle = `下载文件的名字`;
      var zip = new JSZip();
      var promises = [];
      let cache = {};
      // 要下载图片的url
      let arrImg = [];
        //fileList问下载的文件的全连接地址集合
      for (let i = 0; i < this.fileList.length; i++) {
        arrImg.push({
          path: this.fileList[i],
          name: this.fileList[i],
        });
      }

      for (let item of arrImg) {
        const promise = this.getImgArrayBuffer(item.path).then((data) => {
          // 下载文件, 并存成ArrayBuffer对象(blob)
          zip.file(item.name, data, { binary: true }); // 逐个添加文件
          cache[item.name] = data;
        });
        promises.push(promise);
      }
      Promise.all(promises)
        .then(() => {
          zip.generateAsync({ type: "blob" }).then((content) => {
            // 生成二进制流
            FileSaver.saveAs(content, blogTitle); // 利用file-saver保存文件  自定义文件名
            this.btnLoading = false;
          });
        })
        .catch((res) => {
          this.$message.error("文件压缩失败");
        });
    },