1680745307968.png
npm install jszip
npm install file-saver
import JSZip from "jszip";
import FileSaver from "file-saver";
BatchDownload(){
const imgDataUrl = [
{
nickname: '小王.jpg',
path: 'https://xxx.jpg'
},
{
nickname: '小張.jpg',
path: 'https://xxx.jpg'
}
]
let _this = this;
let zip = new JSZip();
let cache = {};
let promises = [];
_this.title = '正在加載壓縮文件';
for (let item of imgDataUrl) {
const promise= _this.getImgArrayBuffer(item.path).then(data => {
// 下載文件, 并存成ArrayBuffer對象(blob)
zip.file(item.nickname, data, { binary: true }); // 逐個添加文件
cache[item.nickname] = data;
});
promises.push(promise);
}
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then(content => {
_this.title = '正在壓縮';
// 生成二進制流
FileSaver.saveAs(content, '簽到照片'); // 利用file-saver保存文件 自定義文件名
_this.title = '壓縮完成';
});
}).catch(res=>{
_this.$message.error('文件壓縮失敗');
});
})
},
//通過url 轉為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();
});
},
