碰巧做到一个多文件,并且以压缩包形式下载的需求,于是乎----
- 首先,我们先安装这款插件
npm install jszip
npm install file-saver
- 因为是vue项目,而且也就这个页面会用到,所以就单页面引入了
import JSZip from'jszip'
import FileSaver from'file-saver'
-
其实做这个思路有很多,也可以用canvas去绘制,这里我没有用到,给你们看下我的需求,我的是一个层叠式banner,用来展示给用户看的,有多少张图,目前接口返回是三张
banner展示.png
需求就是, 点击确定按钮,就会以压缩包的形式来下载这三张图片
- 插件引入了,我们就要开始干活了,首先我们做一个转ArrayBuffer对象(blob)的封装
//通过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();
});
},
-
封装做好后,我们就来到这个点击确定按钮的事件,点击下载
首先做好说明,我的this.picturePath的格式是下面这样的
this.picturePath格式说明.png
有ImageUrl和name属性
handleDownLoadImage() {
let _this = this;
let zip = new JSZip();
let obj = {};
let promises = [];
_this.title = '正在加载压缩文件';
// 循环图片数组
for (let i = 0; i < this.picturePath.length; i++) {
if(this.picturePath[i].ImageUrl != '') {
const promise= _this.getImgArrayBuffer(this.picturePath[i].ImageUrl).then(res => {
// 下载文件, 并存成ArrayBuffer对象(blob)
console.log(res.type)
// 这里的一定要截取res里的type属性,然后拼接上去,如果没有做拼接,压缩后的图片是展示不了的
zip.file(this.picturePath[i].name + '.' + res.type.substring(6), res, { binary: true }); // 逐个添加文件
// 这里截取我是为了打印
obj [this.picturePath[i].name + '.' + res.type.substring(6)] = res;
console.log('``````````````````````````````',obj )
});
promises.push(promise);
}else {
return this.$message.error('空文件不允许下载 !');
}
}
Promise.all(promises).then(() => {
zip.generateAsync({ type: "blob" }).then(res=> {
_this.title = '正在压缩中';
// 生成二进制流
FileSaver.saveAs(res, '图片管理'); // 利用file-saver保存文件,可以改成自己想要的压缩包名称
_this.title = '压缩完成';
});
}).catch(res=>{
_this.$message.error('文件压缩失败');
});
this.dialogVisible = false; // 弹窗关闭
},
-
下面给大家看
zip.file(this.picturePath[i].name + '.' + res.type.substring(6), res, { binary: true })没有截取的后果,发现打开压缩包,里面的图片名称是没有后缀的,打开是一个文件流
没有截取.png -
这个就是已经截取后的效果
截取后.png
就到这里咯,如果有帮到你,请帮忙点个赞,谢谢~
