前端压缩文件、下载

使用插件：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 || []);
});

　　

有不足之处请指出，欢迎交流！