vue将文件/图片批量打包下载zip

TOC

vue将文件/图片批量打包下载

各种格式都可以,只要url能够打开或者下载文件即可.

1.通过文件的url,使用js的XMLHttpRequest获取blob
2.将blob压缩为zip

由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒

  • 添加依赖
//npm install jszip
//npm install file-saver
在页面的script中引入依赖
import JSZip from 'jszip'
import FileSaver from 'file-saver'
  • 代码
      /**文件打包
       * arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]
       * filename 压缩包名
       * */
      filesToRar(arrImages, filename) {
        let _this = this;
        let zip = new JSZip();
        let cache = {};
        let promises = [];
        _this.title = '正在加载压缩文件';

        for (let item of arrImages) {
          const promise= _this.getImgArrayBuffer(item.fileUrl).then(data => {
            // 下载文件, 并存成ArrayBuffer对象(blob)
            zip.file(item.renameFileName, data, { binary: true }); // 逐个添加文件
            cache[item.renameFileName] = data;
          });
          promises.push(promise);
        }

        Promise.all(promises).then(() => {
          zip.generateAsync({ type: "blob" }).then(content => {
            _this.title = '正在压缩';
            // 生成二进制流
            FileSaver.saveAs(content, filename); // 利用file-saver保存文件  自定义文件名
            _this.title = '压缩完成';
          });
        }).catch(res=>{
          _this.$message.error('文件压缩失败');
        });
      },
    //获取文件blob
      getImgArrayBuffer(url){
        let _this=this;
        return new Promise((resolve, reject) => {
            //通过请求获取文件blob格式
          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();
        });

      },




posted @   紫月java  阅读(4981)  评论(9编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示