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保存文件  自定义文件名})})},