vue使jsZip和FileSaver.js打包下载

安装

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();
    });
}