前端拿到zip中所有文件并下载为新的zip文件

news2025/1/10 11:54:06

问题原因:后端返回了一个zip格式文件供前端下载,然后下载后,形成了zip套zip的形式,当后端不愿处理时,前端不能坐以待毙

PS:当压缩包文件量过大,前端可能会出问题(脑测,未实测)

递归解压文献:JS前端解压zip的方法和技巧分享_javascript技巧_脚本之家

多文件压缩文献:前端下载多个压缩包中的文件 - 简书

代码:

依赖:jszip,file-saver

import JSZip from 'jszip'
import { saveAs } from 'file-saver'

// 下载为压缩包
async downloadZip(res, name) {
  /*
    res: 后端文件流
    name: xxx.zip
  */
  const blobs = await extractNestedZip(res)
  return createAndDownloadNewZip(blobs, name)

  // 递归解压
  async function extractNestedZip(zipBlob) {
    const zip = new JSZip()
    const zipData = await zip.loadAsync(zipBlob)
    const extractedFiles = []
    for (const [name, file] of Object.entries(zipData.files)) {
      // 如果文件是嵌套的 ZIP 文件,则递归解压
      if (name.endsWith('.zip')) {
        const nestedZipBlob = await file.async('blob')
        const nestedFiles = await extractNestedZip(nestedZipBlob)
        extractedFiles.push(...nestedFiles)
      } else {
        // 如果文件不是 ZIP 文件,则处理
        if (['.xlsx', '.xls'].some(item => name.endsWith(item))) {
          const blob = await file.async('blob')
          extractedFiles.push({ name, data: blob })
        } else if (!name.endsWith('/')) {
          // 过滤掉文件夹
          const fileData = await file.async('text')
          extractedFiles.push({ name, data: fileData })
        }
      }
    }

    return extractedFiles
  }
  // 下载 返回格式为 extractNestedZip 返回格式
  function createAndDownloadNewZip(blobs, zipName) {
    /*
      blobs: [{name: '',data: blob文件}]
    */
    const zip = new JSZip()

    // 为每个PDF文件生成一个新的文件名(如果需要)并添加到新压缩包中
    blobs.forEach(item => {
      const fileName = item.name
      zip.file(fileName, item.data, { binary: true })
    })

    // 生成新的压缩包Blob对象
    zip.generateAsync({ type: 'blob' }).then((content) => {
      // 下载新的压缩包
      saveAs(content, zipName)
    })
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2274315.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

国内使用博查SearchAPI进行智能搜索,通过API获取搜索引擎的天气、日历、百科、手机、火车票等信息

在现代开发中,网络资源搜索是关键且常见的需求。博查SearchAPI作为国内领先的智能搜索解决方案,已服务超过2000家企业和16000名开发者,获得腾讯元器、字节扣子、阿里钉钉等官方推荐。该API提供近百亿网页内容及多样的生态合作内容&#xff0c…

免费网站源码下载指南:如何安全获取并降低开发成本

许多开发者或是需要建立网站的人,可以方便地获取免费网站源码。这样的下载能帮助他们降低开发费用,迅速构建起基本框架。但在此过程中,仍有许多需要注意的事项。 许多开发者或是需要建立网站的人,可以方便地获取免费网站源码。这…

colnames看似简单,却能优化数据处理流程

引言 在数据处理和分析中,变量名称是至关重要的,它们决定了数据的可读性和操作的简便性。在R语言中,colnames 函数以其简单的语法设计,提供了高效管理数据框列名的能力,尤其是在复杂的爬虫任务中显得尤为重要。本篇文…

计算机网络例题

IP地址分类: A类:网络号范围: 1~126 (0000 0001 ~ 0111 1110) B类:网络号范围:128.1 ~ 191.255 (可用范围) C类:网络号段范围:192.0.1 ~ 223.2…

腾讯云AI代码助手编程挑战赛 - 使用 JavaScript 构建一个简易日历

功能简介: 动态年份选择:用户可以通过下拉框选择从 2000 年到 2050 年的任意年份。全年日历生成:根据用户选择的年份,动态生成该年份的所有 12 个月份的日历。直观的 UI 设计:使用 CSS 美化日历外观,使日历…

hive迁移后修复分区慢,怎么办?

我有1个30TB的分区表,客户给的带宽只有600MB,按照150%的耗时来算,大概要迁移17小时。 使用hive自带的修复分区命令(一般修复分区比迁移时间长一点),可能要花24小时。于是打算用前面黄大佬的牛B方案。 Hive增…

java-方法详解

目录​​​​​​​ 一、方法的定义 二、方法的调用 1.对于非静态方法: 2.对于静态方法: 3.类名.什么情况下可以省略 三、方法的参数传递 (1).实参和形参 形参 实参 (2).基本数据类型参数传递: (3).引用数据类型参数传递&#xff…

第二十八周机器学习笔记:PINN求正反解求PDE文献阅读——反问题、动手深度学习

第二十八周周报 一、文献阅读题目信息摘要Abstract网络架构实验——Data-driven discovery of partial differential equations(偏微分方程的数据驱动发现)1. Continuous time models(连续时间模型)例子:(Navier–Stok…

IT面试求职系列主题-Jenkins

想成功求职,必要的IT技能一样不能少,先说说Jenkins的必会知识吧。 1) 什么是Jenkins Jenkins 是一个用 Java 编写的开源持续集成工具。它跟踪版本控制系统,并在发生更改时启动和监视构建系统。 2)Maven、Ant和Jenkins有什么区别…

【我的 PWN 学习手札】IO_FILE 之 FSOP

FSOP:File Stream Oriented Programming 通过劫持 _IO_list_all 指向伪造的 _IO_FILE_plus,进而调用fake IO_FILE 结构体对象中被伪造的vtable指向的恶意函数。 目录 前言 一、glibc-exit函数浅析 二、FSOP 三、Largebin attack FSOP (…

ChatGPT入门之文本情绪识别:先了解LSTM如何处理文字序列

文章目录 0. 首先聊聊什么是RNN1. 理解LSTM,从数据如何喂给 LSTM开始2. LSTM每个门是如何处理序列数据的?2.1 遗忘门(Forget Gate):该忘掉哪些信息?2.2 输入门(Input Gate)&#xff…

springboot和vue配置https请求

项目场景: 代码发布到线上使用https请求需要配置ssl证书,前后端都需要修改。 问题描述 如图,我们在调用接口时报如下错误,这就是未配置ssl但是用https请求产生的问题。 解决方案: 前端:在vite.config.js文…

软件工程期末整理(二)

快速原型开发模型是(适用于客户需求难以清楚定义、规模较小的系统)。(编写系统实施计划)不是系统设计阶段的主要活动 解释:系统实施计划”更侧重于后续的实施与部署阶段,属于项目管理层面的内容 协作性不属于构件的特性在类图中…

filebeat、kafka

elk的架构 es数据库:非关系型数据库,json格式 logstash:收集日志 kibana:图形化的工具 ↓ 以上三种结合起来即为日志收集系统 filebeat 作用:filebeat是一款轻量级的日志收集工具,不依赖java环境&…

vue3使用vue3-video-play播放m3u8视频

1.安装vue3-video-play npm install vue3-video-play --save2.在组件中使用 import vue3-video-play/dist/style.css; import VideoPlay from vue3-video-play;// 视频配置项 const options reactive({src: https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8, //视频源mute…

项目代码第8讲:Socket和OPC UA客户端通信;数据库的表格内容谁填的?(OPC Client和Web);在Program.cs中单独开启一个线程

一、Socket:用于和OPC UA客户端通信 1、Socket和OPC UA的定义 1>Socket:只是一个API,提供了一个使用 TCP(以及其他协议)的方式,用于在同一台计算机上的进程之间或不同计算机之间的进程通信 一个API Socket 是一种应用程序编程接口(API),它提供了一系列函数…

离线录制激光雷达数据进行建图

目前有一个2D激光雷达,自己控制小车运行一段时间,离线获取到激光雷达数据后运行如下代码进行离线建图。 roslaunch cartographer_ros demo_revo_lds.launch bag_filename:/home/firefly/AutoCar/data/rplidar_s2/2025-01-08-02-08-33.bag实际效果如下 d…

hisi mipi yuv422数据异常问题记录解决

问题解决,海思原厂提供支持后解决方式,适用于dv500和928系列: YUV422输入时,mask[1]使用0x00FFC000得配置。 问题现象就是mask[1]配置的0xFF0000时,YUV值收到后UV的会向下做一个4对齐的操作,导致色度UV数据…

《跟我学Spring Boot开发》系列文章索引❤(2025.01.09更新)

章节文章名备注第1节Spring Boot(1)基于Eclipse搭建Spring Boot开发环境环境搭建第2节Spring Boot(2)解决Maven下载依赖缓慢的问题给火车头提提速第3节Spring Boot(3)教你手工搭建Spring Boot项目纯手工玩法…

VS2022 安装和配置 vcpkg

vs2022使用vcpkg最全版本_vs2022 vcpkg-CSDN博客 Visual Studio 2022 安装和配置 vcpkg_vs2022 vcpkg-CSDN博客 GitHub - microsoft/vcpkg: C Library Manager for Windows, Linux, and MacOS vcpkg 文档 | Microsoft Learn 没有详细教程写出来,先大概看看&#x…