vue下载多文件以压缩包形式下载

碰巧做到一个多文件,并且以压缩包形式下载的需求,于是乎----

• 首先,我们先安装这款插件

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

就到这里咯,如果有帮到你,请帮忙点个赞,谢谢~