淮南招聘网站建设,上海网站排名公司,垂直型网站名词解释,咨询公司排行榜场景#xff1a; 一般是后端直接将多个文件打包好#xff0c;前端调用下载地址下载打包#xff1b;但是文件太多会导致下载接口时间过长和服务器爆掉#xff1b;故采用前端先将多个文件下载然后进行打包#xff1b; 注意点#xff1a; 1.先获取所有下载的文件路径和包含后… 场景 一般是后端直接将多个文件打包好前端调用下载地址下载打包但是文件太多会导致下载接口时间过长和服务器爆掉故采用前端先将多个文件下载然后进行打包 注意点 1.先获取所有下载的文件路径和包含后缀名的文件名 2.文件名称尽量不要太长太长好像会出现压缩包.zip里的文件不是平铺开的而是放在一个个文件夹内的。所以名称别太长。 一引入插件 分别是axios获取文件blobjszip打包文件file-saver将文件保存到本地 //下载依赖
// npm i axios, JSZip, FileSaver -s
import axios from axios;
import JSZip from jszip;
import FileSaver from file-saver;二一般会先调一个接口获取共有哪些文件需要下载包括名称和下载地址 el-button typeprimary clickdownFileZip(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保存文件 自定义文件名})})},
