前端html实现多文件打包并下载
最近公司有这样的需求,上网百度一下后,还是找到了方法
用到的插件axios,FileSaver,jszip
axios不用解释了,发请求的插件,重点是后面两个
1.FileSaver
这是一个用来保存各种媒体文件的插件
2.jszip
这是用来打包压缩文件的
getFile = (url) => {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
};
// 批量下载
handleBatchDownload = async (selectImgList) => {
const data = selectImgList;
const zip = new JSZip()
const cache = {}
const promises = []
await data.forEach((item, index) => {
const promise = this.getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
const arr_name = item.split("/"); //截取文件名
let file_name = arr_name[arr_name.length - 1] // 获取文件名
zip.file(file_name, data, {
binary: true
}) // 逐个添加文件
cache[file_name] = data
})
// 在zip里面添加一个txt
if(index == data.length-1){
zip.file("Hello.txt", "Hello World");
}
promises.push(promise)
})
Promise.all(promises).then(() => {
zip.generateAsync({
type: "blob"
}).then(content => { // 生成二进制流
saveAs(content, "photo11.zip") // 利用file-saver保存文件
})
})
};
接下来调用方法传入数组就ok啦
补充一些
如果想要在里面添加文件夹的话可以:
// 创建一个名为images的新的文件目录
var img = zip.folder("images");
// 这个images文件目录中创建一个base64数据为imgData的图像,图像名是smile.gif
img.file("smile.gif", imgData, {base64: true});
当然,如果你的文件名为"/目录/aa.txt"这种格式的话,它会默认帮你生成一个名叫"目录"的文件夹,并把aa.txt下载放入里面,如果后续有文件也需要放在这个目录,也可以把名称改成"/目录/bb.txt"这样