vue中多个文件链接打包为一个zip压缩包下载
一、安装依赖:npm install --save axios JSZip FileSaver
二、在文件中引入模块axios JSZip FileSaver
import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'
export default{
data(){
urlList :[
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
]
}
methods:{
//将链接转化为arraybuffer文件流格式
getFile(url) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
responseType: 'arraybuffer',
})
.then((data) => {
resolve(data.data)
})
.catch((error) => {
reject(error.toString())
})
})
},
//下载图片
downloadPic() {
this.loading = true
const zip = new JSZip()
const promises = []
//将文件添加到压缩包中
urlList.forEach((url,index) => {
const promise = this.getFile(url).then((data) => {
//截取后缀名(注意重命名一定要加上原来图片的后缀,否则下载出来的文件就是错误的)
let nameList = url.split('.')
let fileName = index + '.' + nameList[nameList.length - 1]
zip.file(fileName, data, { binary: true })//文件名、文件流、是否为二进制
})
promises.push(promise)
})
//等待所有文件添加完进行打包
Promise.all(promises)
.then(() => {
zip.generateAsync({ type: 'blob' }).then((content) => {
//利用file-saver保存文件 自定义文件名
FileSaver.saveAs(
content,
new Date().getTime()
)
this.loading = false
})
})
.catch((err) => {
this.$message.error(err || '文件压缩失败')
this.loading = false
})
},
}
}
三、若图片/文件链接不是https的,需要链接所在的服务器支持跨域,否则会报跨域的错