JSZip的使用，向前端发送Zip包

最新推荐文章于 2024-06-30 16:24:04 发布

醒来就想躺

最新推荐文章于 2024-06-30 16:24:04 发布

阅读量1.2k

点赞数 5

分类专栏：后端篇文章标签：前端 javascript node.js

本文链接：https://blog.csdn.net/weixin_51037408/article/details/121437506

版权

后端篇专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端利用JSZip库处理多个文件或数据，通过一次交互实现多次响应。首先通过npm安装JSZip，然后在后端利用buffer流将多个文件打包成Zip。通过设置响应头信息，将生成的Zip包以附件形式发送给前端。该方法绕过了浏览器的限制，实现了批量导出。

摘要由CSDN通过智能技术生成

JSZip的使用，向前端发送Zip包

业务场景

由于浏览器的自我保护机制，open.window只能发送一个请求，在此情况下需向前端发送多个文件或多个数据。即交互一次，多次响应。

引入

npm i jszip

前言

什么是buffer流？在传统的前端我们只需要做一些Unicode编码字符串处理，而在node中我们需要buffer来处理后端向前端传送的二进制数据。

后端JS代码（buffer流传输）

  generateExcelZip(`批量导出数据`, bufferZip, response) 
   //bufferZip为对象包含数组形式，其中包含buffer
  async generateExcelZip(fileName, buffer, response) {
    response.implicitEnd = false //将浏览器默认配置取消
    var zip = new JSZip()  //创建一个zip
    var zipFile = zip.folder(fileName)  //创建文件夹
    buffer.map((i, v) => {
      zipFile.file(`${i.excelName}.xlsx`, i.buffer)
    })
    zip.generateAsync({ type: 'nodebuffer' }).then((content) => {
      //设置头信息
      response.response.setHeader('Content-Type', 'application/zip')   //申明类型为zip
      response.response.setHeader('Content-Disposition', `attachment;filename=package.zip`)
      const bufferStrream = new PassThrough() 
      bufferStrream.end(content)
      bufferStrream.pipe(response.response)
    })
  },