Vue 中批量下载文件并打包的示例代码

发布时间：2020-12-17 02:43:03 所属栏目：百科来源：网络整理

导读：思路: 用 ajax 将文件下载,然后用 jszip 压缩文件,最后用 file-saver 生成文件 1. 准备工作安装 3 个依赖: axios,jszip,file-saver 2. 下载文件 { return new Promise((resolve,reject) => { axios({ method:'get',url,responseType: 'arraybuffer' }).then

思路: 用 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())
})
})
}

export default {
render(h) {
return (<a on-click={ () => this.handleBatchDownload() } href="javascript:;" rel="external nofollow" >批量下载)
},methods: {
handleBatchDownload() {
const data = ['各类地址1',}

注意:

如果下载的文件过大,打包的时间将会很长,甚至可能会导致浏览器奔溃

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!