思路: 用 ajax 将文件下载,然后用 jszip 压缩文件,最后用 file-saver 生成文件
1. 准备工作
安装 3 个依赖: axios,jszip,file-saver
2. 下载文件
{
return new Promise((resolve,reject) => {
axios({
method:'get',url,responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
}
这里需要注意的是responseType,如果下载文件是文本类型的(如: .txt,.js之类的),那么用responseType: 'text'也可以,但是如果下载的文件是图片,视频之类的,就得用arraybuffer
3. 打包文件
{
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,"打包下载.zip") // 利用file-saver保存文件
})
})
},},}
4. 最终代码
const getFile = url => {
return new Promise((resolve,responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
}
return new Promise((resolve,responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
}
export default {
render(h) {
return (<a on-click={ () => this.handleBatchDownload() } href="javascript:;" rel="external nofollow" >批量下载)
},methods: {
handleBatchDownload() {
const data = ['各类地址1',}
注意:
如果下载的文件过大,打包的时间将会很长,甚至可能会导致浏览器奔溃
原文链接：https://www.f2er.com/vue/35141.html