安装
npm install jszip
npm install file-saver --save
在组件中
import JSZip from 'jszip'
import FileSaver from "file-saver"
//调用
this.filesToRar(this.imgList,"学生涂鸦答题照片");
/**文件打包
*@param {object} arrImages 文件list:[ { url:文件url , title:文件名 } ]
*@param {string} filename 压缩包的名字
**/
filesToRar(arrImages, filename) {
let _this = this;
let zip = new JSZip();
let cache = {};
let promises = [];
let i = 0;
arrImages.forEach((item)=>{
var promise = _this.getImgArrayBuffer(item.url).then(data => {
i++;
let name = "(" + i + ")" + item.title + ".png";
// 下载文件, 并存成ArrayBuffer对象(blob)
zip.file(name, data, { binary: true }); // 逐个添加文件
cache[name] = data;
});
promises.push(promise);
})
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then(content => {
// 生成二进制流
FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名
});
})
.catch(res=>{
console.log("压缩失败")
});
}
/**通过url获取文件blob
*@param {string} url 图片http路径
**/
getImgArrayBuffer(url){
return new Promise((resolve, reject) => {
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();
});
}