1、引入JSZip
import JSZip from 'jszip';
2、源码
exportMaterialDrawings: async function () {
let list = _.get($scope.entity, 'materialList', []);
if (!list || _.isEmpty(list) || list.length < 1) {
dialog.noty('采购物料需至少有一项才能导出');
return false;
}
let codeList = list.map(item => {
return item.materialCode
});
let data = {codeList: codeList}
//下载地址集合
let imgs = []
//key:url value:文件名字
let map = new Map();
http.post("/materialType/getMaterialShowByCodeList", {
data: util.encodeJSON(data)
}).then((res) => {
let result = _.get(res, "data.datas.result", []);
result.forEach(item => {
let url = skybird.c_path + '/gridfs/' + item.url
let name = item.materialCode + '-' + item.materialName
imgs.push(url)
map.set(url, name)
})
ctrl.downloadFile(imgs, map)
})
},
downloadFile: function (imgs, map) {
// 创建一个新的JSZip实例
const zip = new JSZip();
// 异步地获取每个图片并将其添加到zip文件中
const promises = imgs.map(url => {
return fetch(url)
.then(response => response.blob())
.then(blob => {
// 设置文件名
const filename = `${map.get(url)}.jpg`;
// 将blob添加到zip文件中
zip.file(filename, blob);
});
});
// 等待所有图片都添加到zip文件中
Promise.all(promises)
.then(() => {
// 生成zip文件并获取Blob
zip.generateAsync({type: "blob"})
.then(function (blob) {
// 创建一个隐藏的a标签
const a = document.createElement('a');
// 创建一个Blob URL
const url = URL.createObjectURL(blob);
// 设置a标签的href和download属性
a.href = url;
a.download = '物料图纸.zip';
// 触发点击事件
a.click();
// 释放URL对象
URL.revokeObjectURL(url);
});
})
.catch(error => {
console.error('下载异常:' + error);
dialog.noty('下载异常:' + error);
});
},