前言
要想压缩并下载文件,要用到 file-saver、jszip、axios 等包
实现
直接贴上代码,下面的代码可以封装为一个 js 文件,直接使用。
import { saveAs } from 'file-saver'
import JSZip from 'jszip'
import axios from 'axios'
/*
打包、压缩并下载文件,zip 后缀名
fileArr,示例值: [ { url: 'http://xxx.png' }, { url: 'http://xxx.png' }, ]
zipName,压缩文件名名称
zipFolder,压缩文件里面的文件夹名称,没有传入,则不使用文件夹包裹内容
*/
export default function (fileArr, zipName='附件', zipFolder) {
if (!fileArr || fileArr.length === 0) {
throw Error('fileArr 参数(文件列表)不能为空')
}
const zip = new JSZip()
const promises = []
let folder = null
if (zipFolder) {
folder = zip.folder(zipFolder)
}
fileArr.forEach(item => {
let url = item.url
const fileName = url.split('/').slice(-1)
let promise = getFile(url).then(fileRes => {
if (folder) {
folder.file(fileName, fileRes)
} else {
zip.file(fileName, fileRes)
}
})
promises.push(promise)
})
Promise.all(promises).then(() => {
zip.generateAsync({
type: 'blob'
}).then(content => {
saveAs(content, zipName)
})
})
}
const getFile = (url) => {
return new Promise((resolve, reject) => {
axios.get(url, {
responseType: 'arraybuffer'
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err.toString())
})
})
}