Vue 中批量下载文件并打包的示例代码
思路:用ajax将文件下载,然后用jszip压缩文件,最后用file-saver生成文件
1.准备工作
安装3个依赖:axios,jszip,file-saver
yarnaddaxios yarnaddjszip yarnaddfile-saver
2.下载文件
importaxiosfrom'axios'
constgetFile=url=>{
returnnewPromise((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.打包文件
importJSZipfrom'jszip'
importFileSaverfrom'file-saver'
exportdefault{
methods:{
handleBatchDownload(){
constdata=['各类地址1','各类地址2']//需要下载打包的路径,可以是本地相对路径,也可以是跨域的全路径
constzip=newJSZip()
constcache={}
constpromises=[]
data.forEach(item=>{
constpromise=getFile(item).then(data=>{//下载文件,并存成ArrayBuffer对象
constarr_name=item.split("/")
constfile_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.最终代码
importaxiosfrom'axios'
importJSZipfrom'jszip'
importFileSaverfrom'file-saver'
constgetFile=url=>{
returnnewPromise((resolve,reject)=>{
axios({
method:'get',
url,
responseType:'arraybuffer'
}).then(data=>{
resolve(data.data)
}).catch(error=>{
reject(error.toString())
})
})
}
exportdefault{
render(h){
return(this.handleBatchDownload()}href="javascript:;"rel="externalnofollow">批量下载)
},
methods:{
handleBatchDownload(){
constdata=['各类地址1','各类地址2']//需要下载打包的路径,可以是本地相对路径,也可以是跨域的全路径
constzip=newJSZip()
constcache={}
constpromises=[]
data.forEach(item=>{
constpromise=getFile(item).then(data=>{//下载文件,并存成ArrayBuffer对象
constarr_name=item.split("/")
constfile_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保存文件
})
})
},
},
}
注意:
如果下载的文件过大,打包的时间将会很长,甚至可能会导致浏览器奔溃
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。