当前位置: 首页 > article >正文

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

问题原因:后端返回了一个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.kler.cn/a/500209.html

相关文章:

  • Android基于回调的事件处理
  • 线性表的接口定义及使用
  • EFCore HasDefaultValueSql
  • 小程序相关
  • 鸿蒙面试 2025-01-09
  • RS-232串口和普通串口介绍
  • Python图像处理实用指南:PIL库的多样化应用
  • QT中的字符串类型
  • html + css 顶部滚动通知栏示例
  • Shell 经典面试例题
  • CSS语言的网络编程
  • Excel如何分区设置密码,一个区域一个密码,数据收集时使用太方便了
  • golang - context.Context:Goroutine数据传输和管理
  • 3DGabor滤波器实现人脸特征提取
  • Swagger学习⑰——@Link注解
  • Golang 设计模式
  • 自动化测试框架playwright 常见问题和解决方案!
  • Caffeine核心设计图解
  • SQL-leetcode-584. 寻找用户推荐人
  • 网络安全行业规划,零基础如何入门网络渗透?
  • 拥抱HarmonyOS之高效使用DevEco