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