使用插件:file-saver、jszip
安装插件:
npm install file-saver --save npm install jszip --save
压缩文件(压缩的内容需要是blob流,可以是后端接口返回的blob流,如果是远程文件地址,可以参看第3条)
1、一个文件压缩:
import saveAs from 'file-saver'; import JSZip from 'jszip'; // 在函数体中调用 const zip = new JSZip(); zip.file(filename, blob); zip.generateAsync({type:'blob'}).then(function(content) { saveAs(content, '压缩包名称.zip'); });
2、多个文件压缩
import saveAs from 'file-saver'; import JSZip from 'jszip'; // 在函数体中调用以下,list里面存放数据 const zip = new JSZip();
const list = []; list.forEach((item) => { zip.file(item.fileName, item.blob); }); zip.generateAsync({type:'blob'}).then(function(content) { saveAs(content, '压缩包名称.zip'); });
3、如果文件地址是远程地址,需要先处理成blob流,再进行压缩处理
- 远程文件地址转成blob流
// 远程文件地址转成blob/base64流 function getBase64ByURL (fileurl, data = {}) { return new Promise((resolve, reject) => { window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open('get', fileurl, true); xhr.responseType = 'blob'; xhr.onload = function () { if (this.status == 200) { var blob = this.response; let oFileReader = new FileReader(); oFileReader.onloadend = function (e) { resolve({blob,base64:e.target.result, ...data}); }; oFileReader.onerror = function(e){ reject(e); }; oFileReader.readAsDataURL(blob); } }; xhr.send(); }); }
- 压缩下载文件
function jszipFile(list) { const zip = new JSZip(); list.forEach((item) => { zip.file(item.fileName, item.blob); }); zip.generateAsync({type:'blob'}).then(function(content) { saveAs(content, '压缩包名称.zip'); }); }
- 远程文件地址批量转换成流文件,再进行压缩、下载
import saveAs from 'file-saver'; import JSZip from 'jszip';
// 在函数体中调用以下
const list = [];
list.forEach((item) => { const file = getBase64ByURL(item.fileUrl, item); arr.push(file); }); Promise.all(arr).then((list) => { jszipFile(list || []); });