前端压缩文件、下载

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

• 参考：前端进行压缩文件、下载 - 码农教程

• 原文地址： https://www.cnblogs.com/mihoutaoguniang/p/17251092.html