记录一下后台管理全局封装一个压缩包下载方法,文件夹名自定义,文件名自定义,压缩包名自定义。
安装必要的库
npm install jszip
npm install file-saver
自定义一个公共方法全局注入
页面使用
/** 下载按钮操作 */
handleDownload() {
const ids = this.ids;
let selectFileList = this.dataList.filter(o => ids.includes(o.id));
this.$MyUtil.jszipDown({
arrFileObj: selectFileList, // 必传
filePath: 'lineCodeImg', //文件下载路径字段 必传
fileName: 'lineName,lineCode', //文件自定义名字 可以不穿
})
},
my-util.js
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
import axios from 'axios'
import { getToken } from '@/utils/auth'
export default {
/**
* 在对象数组中找到一个属性值和参数相等的一条记录
* @param {object} Obj 接受参数对象
* arrFileObj 对象数组
* filePath 文件下载路径字段
* folderName 文件夹名字
* fileName 文件自定义名字
* jszipName 文件自定义名字
* @returns
*/
jszipDown(Obj) {
//此方法后端返回文件流
function getUrlFile(url) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
headers: {
'Authorization': 'Bearer ' + getToken(),
'Content-Type': 'application/json; application/octet-stream'
},
responseType: 'blob',
data: { url },
url: process.env.VUE_APP_BASE_API + '/common/proxy/download'
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.toString())
})
})
};
const zip = new JSZip()
const promiseList = [];
Obj.arrFileObj.forEach(file => {
if (file) {
let fName = ''
if (Obj.fileName) {
let format = file[Obj.filePath].split('.')
format = format[format.length - 1]
let nameL = Obj.fileName.split(',')
let name = nameL.map(item=>file[item]).join('-')
fName = name+'.'+format
}else{
fName = file[Obj.filePath].split('/')
fName = fName[fName.length - 1]
}
const promise = getUrlFile(file[Obj.filePath]).then(data => {
if (Obj.folderName) {
zip.folder(file[Obj.folderName]).file(fName, data,{binary: true})
} else {
zip.file(fName, data,{binary: true})
}
});
promiseList.push(promise);
}
});
Promise.all(promiseList).then(res => {
zip.generateAsync({ type: 'blob' }).then(data => saveAs(data, Obj.jszipName?Obj.jszipName:'文件压缩包.zip'))
}).catch(err => {
console.log(err);
});
}
}