vue将文件/图片批量打包下载zip
vue将文件/图片批量打包下载
各种格式都可以,只要url能够打开或者下载文件即可.
1.通过文件的url,使用js的XMLHttpRequest获取blob
2.将blob压缩为zip
由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒
- 添加依赖
//npm install jszip
//npm install file-saver
在页面的script中引入依赖
import JSZip from 'jszip'
import FileSaver from 'file-saver'- 代码
/**文件打包
* arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]
* filename 压缩包名
* */
filesToRar(arrImages, filename) {
let _this = this;
let zip = new JSZip();
let cache = {};
let promises = [];
_this.title = '正在加载压缩文件';
for (let item of arrImages) {
const promise= _this.getImgArrayBuffer(item.fileUrl).then(data => {
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.renameFileName, data, { binary: true }); // 逐个添加文件
cache[item.renameFileName] = data;
});
promises.push(promise);
}
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then(content => {
_this.title = '正在压缩';
// 生成二进制流
FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名
_this.title = '压缩完成';
});
}).catch(res=>{
_this.$message.error('文件压缩失败');
});
},
//获取文件blob
getImgArrayBuffer(url){
let _this=this;
return new Promise((resolve, reject) => {
//通过请求获取文件blob格式
let xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function () {
if (this.status == 200) {
resolve(this.response);
}else{
reject(this.status);
}
}
xmlhttp.send();
});
},
