安裝

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