vue + jsZip 实现解压文件并下载到本地
2020-07-14 本文已影响0人
筱贰_梁
应用场景

点击下载轻量化后文件,后台返回的地址是一个存在阿里云的链接地址,这边直接用浏览器下载后,是一个zip的压缩文件


但是需求下载后是解压后的pbim文件,而不是zip,于是想到前端解压后,在下载到本地
实现方法
安装jszip
npm install jszip
点击下载按钮,先去阿里云读取zip的文件信息
this.$axios({
method: 'get',
responseType: 'blob',
url: fileUrl // 文件所在阿里云的链接地址
}).then(res => {
// 把blob格式文件转成FIle类型
let files = new window.File([res.data], fileName, {type: 'zip'})
// 读取zip压缩文件里面的文件内容
JSZip.loadAsync(files).then((zip) => {
for (let key in zip.files) {
// 用blob的格式读取,方便后面下载到本地
let base = zip.file(zip.files[key].name).async('blob')
base.then(res => {
this.doDownload(res, zip.files[key].name)
})
}
})
})
下载到本地
doDownload (data, name) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', name)
document.body.appendChild(link)
link.click()
}
下载成功
