前端压缩文件、下载

使用插件: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

  • 22
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值