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