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

embedded/2025/1/12 1:46:41/

问题原因:后端返回了一个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.namezip.file(fileName, item.data, { binary: true })})// 生成新的压缩包Blob对象zip.generateAsync({ type: 'blob' }).then((content) => {// 下载新的压缩包saveAs(content, zipName)})}
}


http://www.ppmy.cn/embedded/153173.html

相关文章

深入Android架构(从线程到AIDL)_19 IPC的Proxy-Stub设计模式01

1、 复习&#xff1a; IBinder 接口 onTransact()就是EIT造形里的<I>这是标准的EIT造形&#xff0c;其<I>是支持<基类/子类>之间IoC调用的接口。运用曹操(Stub)类&#xff0c;形成两层EIT(两层框架)。

JVM 触发类加载的条件有哪些?

目录 一、类加载生命周期 二、主动引用 2.1、创建类的实例 2.2、访问类的静态字段或静态方法 2.3、反射 2.4、初始化类的子类时&#xff0c;先初始化父类 2.5、虚拟机启动时&#xff0c;初始化 main 方法所在的类 2.6、动态语言支持 三、被动引用 3.1、通过子类引用父…

【踩坑记录❌】ubuntu 安装 NVIDIA 显卡驱动不要 autoinstall

背景 在 ubuntu 22.04 安装 NVIDIA 显卡驱动参考了 博客 的步骤进行&#xff0c;发现有很多评论也出现了无法联网的情况 后续解决 尝试了网卡驱动下载的各类方法&#xff0c;安装驱动的过程中又缺失内核头、 gcc 编译器等文件。由于没有网络&#xff0c;每次缺失的文件只能从…

Spring Boot中的扫描注解如何使用

在 Spring Boot 中&#xff0c;扫描注解是指通过注解来告诉 Spring 框架应该扫描哪些包、哪些类或哪些特定的组件&#xff0c;并将其作为 Spring 容器中的 bean 进行管理。Spring Boot 主要通过以下几种注解来实现自动扫描&#xff1a; ComponentScanSpringBootApplicationCom…

Vue.js Ajax(vue-resource)

Vue 要实现异步加载需要使用到 vue-resource 库。 Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 <script src"https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> Get 请求 以下是一个简单的 Get 请求实例&#x…

配置数据的抗辐照加固方法

SRAM 型FPGA 的配置存储器可以看成是由0 和1 组成的二维阵列&#xff0c;帧的高度为矩阵阵列的高度&#xff0c;相同结构的配置帧组成配置列&#xff0c;如CLB 列、IOB 列、输入输出互联(Input Output Interconnect,IOI)列、全局时钟(Global Clock, GCLK)列、BRAM 列和BRAM 互联…

Kafka 深度剖析

Kafka 深度剖析&#xff1a;从基础概念到集群实战 在当今大数据与分布式系统蓬勃发展的时代&#xff0c;Apache Kafka 作为一款极具影响力的分布式发布 - 订阅消息系统&#xff0c;宛如一颗璀璨的明星&#xff0c;照亮了数据流转与处理的诸多场景。它由 LinkedIn 公司于 2010 年…

前端实时显示当前在线人数的实现

实时显示当前在线人数的实现 本文档提供了在网页上实时显示当前在线人数的多种实现方法&#xff0c;包括使用 WebSocket 实现实时更新和轮询方式实现非实时更新。 方法一&#xff1a;使用 WebSocket 实现实时更新 服务器端设置 通过 Node.js 和 WebSocket 库&#xff08;如 …