【vue】vue项目中批量下载文件并打压缩包

前言

一开始用的是循环单个文件下载，即从后台获取到文件url列表，循环对每个url单独进行下载，这样的问题是每调用一次下载，浏览器都会进行“另存为”的弹框，很麻烦！！！

关闭“下载前询问每个文件的保存位置”，又不是我想要的，这样就不提示保存位置，直接下载到浏览器的默认位置。而且按网上的方法，在程序代码里不让它弹“另存为”的弹框，也不起作用（具体方法放到了参考文章中）。

所以就产生了批量下载并打压缩包的想法。

解决方法

1、下载插件

npm install jszip
npm install file-saver

注： install完成后，会自动在package-lock.json和package.json中，添加上所需依赖。

2、在vue文件中使用

import JSZip from 'jszip'
import FileSaver from 'file-saver'

3、下载文件以及打包方法

    /**文件打包* arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]* filename 压缩包名* */filesToRar(arrImages, filename) {let _this = this;let zip = new JSZip();let cache = {};let promises = [];_this.title = '正在加载压缩文件';const loading = this.$loading({lock: true,text: '正在加载压缩文件',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});console.log("aaaa",arrImages);for (let item of arrImages) {console.log("item",item)// 下载文件, 并存成ArrayBuffer对象const promise = this.getImgArrayBuffer(item.fileStaticUrl).then(data => { // 获取文件名const file_name = encodeURIComponent(item.fileId) // 逐个添加文件zip.file(file_name, data, { binary: true })           cache[file_name] = data})promises.push(promise);}Promise.all(promises)// 生成二进制流.then(() => {zip.generateAsync({ type: "blob" }).then(content => {_this.title = '正在压缩';// 利用file-saver保存文件  自定义文件名FileSaver.saveAs(content, filename);             _this.title = '压缩完成';});loading.close();}).catch(res=>{_this.$message.error('文件压缩失败');loading.close();});},

   getImgArrayBuffer(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();});},

4.获取文件url列表

    getFileUrls() {     this.$http({url: this.$http.adornUrl("/fileSystemApi/fileInfo/batch/download"),method: "post",data: {fileInfoList: this.dataListSelections,updateBy: this.$cookie.get('username')},}).then(({ data }) => {console.log("getFileUrls",data)this.fileInfoList = data.data.fileInfoList;console.log("sd",this.fileInfoList) this.filesToRar(this.fileInfoList, this.getTimestamp());});},

获取的fileInfoList即第3步中的arrImages，时间戳当做压缩包的文件名

5.在data中定义变量

data() {return {dataForm: {id: "",bucketId: "",fileId: "",fileType: "",syscode: "",fileCustno: "",createTime: "",},dataList: [],dataListSelections: [], // 选中数据dataIdListSelections: [], // 选中iddataListLoading: false,currPage: 1,pageSize: 10,totalCount: 0,url: "",fileInfoList: "",dialogVisible: false,};},

6.点击按钮

<template><div><!-- 省略其他... --><el-form:inline="true":model="dataForm"@keyup.enter.native="getDataList()"><el-form-item><el-button type="primary" @click="getFileUrls()">批量下载</el-button></el-form-item></el-form></div>
</template>