vue使用jszip和file-save下载文件并打包；vue前端下载多个文件b并打包；

场景： 一般是后端直接将多个文件打包好，前端调用下载地址下载打包；但是文件太多会导致下载接口时间过长和服务器爆掉；故采用前端先将多个文件下载然后进行打包；
注意点： 1.先获取所有下载的文件路径和包含后缀名的文件名 2.文件名称尽量不要太长，太长好像会出现压缩包.zip里的文件不是平铺开的，而是放在一个个文件夹内的。所以名称别太长。

一：引入插件 分别是axios获取文件blob，jszip打包文件，file-saver将文件保存到本地

//下载依赖
// npm i axios, JSZip, FileSaver -s
import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";

二：一般会先调一个接口获取共有哪些文件需要下载，包括名称和下载地址

<el-button type="primary" @click="downFileZip(fileDownArr)">打包下载</el-button>

// data中的下载变量，待下载的多个文件地址和名称。
fileDownArr: [
        { fileDownName: '非车驾驶证.jpeg', fileDownUrl: G_CGI_PHP.group.documentDownload + `?id=` + 'docde9edfb625464726bb51d68d5dbb05e6' },
        { fileDownName: '非车-桂BZ8268_柳州市顺畅运输有限公司电子保单tpply45953 2.pdf', fileDownUrl: G_CGI_PHP.group.documentDownload + `?id=` + 'docbeeeb5b108f7494ab329205983d161f5' },
        { fileDownName: '非车-桂BZ8268_柳州市顺畅运输有限公司电子保单tpply45953.pdf', fileDownUrl: G_CGI_PHP.group.documentDownload + `?id=` + 'docd009da9404e847b2a565948d6bbea8f2' },
        { fileDownName: '非车营业执照.jpeg', fileDownUrl: G_CGI_PHP.group.documentDownload + `?id=` + 'docb02b92a491324badb8f5450f3b2bb32a' },
      ]

    getFile (url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url, // 原先后端下载单个文件的路径
          // responseType: "ArrayBuffer"  // 注意看下你自己的原先后端下载地址返回的文件格式 是blob 还是其他的啥 对应这里就要改成后端返回的下载格式
          responseType: "blob"
        })
          .then(res => {
            resolve(res.data) // 返回文件的blob   Blob {size: 151382, type: 'image/png'}
          })
          .catch(error => {
            reject(error.toString())
          })
      })
    },
    downFileZip (arr) {
      // 这个是下载的文件的数组  一般会先调用一个后端接口，得到所有需要下载的文件的路径和对应名称（包含后缀名）
      const arr = [{fileDownUrl:'地址', fileDownName:'文件名'}] // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
      
      const zip = new JSZip()
      const cache = {}
      const promises = []
      arr.forEach((item, i) => {
        const promise = this.getFile(item.fileDownUrl).then(data => {
          // 下载文件, 并存成blob对象
          const file_name = i + 1 + item.fileDownName // 获取文件名，一定要包含文件的后缀名(因为重复的文件名只会下载一个，故需要加入下标 不同名)
          zip.file(file_name, data, { binary: true }) // 逐个添加文件
          cache[file_name] = data
        })
        promises.push(promise)
      })
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then(content => {
          // 生成二进制流   然后保存文件（如果这个下载不了 也可以将下方这一行换成a标签下载逻辑）
          FileSaver.saveAs(content, "打包自定义附件名.zip") // 利用file-saver保存文件  自定义文件名
        })
      })
    },