>>补充说明,接口请求默认为axios、安装默认使用npm
1.安装依赖
npm install jszip -S
npm install file-saver -S
2.引入依赖
import JSZip from 'jszip';
import FileSaver from 'file-saver';
3.具体方法
/* 自定义axios实例 */
let instance=axios.create({
"baseURL":process.env.VUE_APP_apiCtx,
"withCredentials":false,
});
/* 下载文件 */
export function getFile(url,filename){
return new Promise((resolve, reject) => {
instance.get(url,{responseType: 'arraybuffer',
"responseType": 'blob'}).then(res => {
resolve(res.data);
}).catch((error) => {
console.error(error);
})
})
}
/* 打包文件
@param{*} data 打包下载路径数组
@param{*} name 打包文件名
*/
export function handleBatchDownload(data,name){
// const data = ['各类地址1', '各类地址2'] // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
const zip = new JSZip();
const cache = {};
const promises = [];
data.forEach(item => {
const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
const arr_name = item.split("/")
const file_name = arr_name[arr_name.length - 1] // 获取文件名
zip.file(file_name, data, { binary: true }) // 逐个添加文件
cache[file_name] = data
})
promises.push(promise)
})
Promise.all(promises).then(() => {
zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
FileSaver.saveAs(content, name) // 利用file-saver保存文件
})
})
}
>>>补充,a标签download属性不能直接下载跨域的文件,使用3中的getFile方法
getFile(url).then(res=>{
let a = document.createElement('a');
let url = window.URL.createObjectURL(res);
a.href = url;
// a.download = filename;
let arr_name = url.split("/")
a.download = arr_name[arr_name.length - 1] // 获取文件名
a.click();
window.URL.revokeObjectURL(url);
});