npm install JSZip
npm install FileSaver
如果npm 下载失败可尝试 yarn add FileSaver
js文件
import JSZip from 'jszip'
import FileSaver from 'file-saver'
const getImgArrayBuffer = (url) => {
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();
});
}
\
const downImage = (imagList, name ,fileName) => {
console.log(imagList, name,'imagList, name')
return new Promise((resolve, reject) => {
let zip = new JSZip();
let cache = {};
let promises = [];
for (let item of imagList) {
const promise = getImgArrayBuffer(item.url).then((data) => {
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(item.id + ".jpg", data, { binary: true }); // 逐个添加文件
cache[item.id] = data;
});
promises.push(promise);
}
Promise.all(promises)
.then(() => {
zip.generateAsync({ type: "blob" }).then((content) => {
// 生成二进制流
FileSaver.saveAs(content, '打包商品' + name+ "-商品id：" + fileName); // 利用file-saver保存文件 自定义文件名
resolve();
});
})
.catch(() => {
reject();
});
})
}
export default downImage;
在组件页面引入js文件
调用方法
//this.images 是要下载的图片数组 [{url: 图片地址, id: 图片名称}]
downImage(this.images,name,fileName)
.then(() => {
this.loading && this.loading.close();
this.$message({
message: "下载完成！",
type: 'success'
});
})
