其他分享
首页 > 其他分享> > JSZip的使用,向前端发送Zip包

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

作者:互联网

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

业务场景

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

引入

npm i jszip

前言

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

后端JS代码(buffer流传输)

  generateExcelZip(`批量导出数据`, bufferZip, response)  //bufferZip为对象包数组形式
  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)
    })
  }, 

后面还会持续更新,欢迎下方评论区留言,下期见

作者:琉璃Diaspora

标签:Zip,zip,buffer,前端,JSZip,bufferStrream,response
来源: https://blog.csdn.net/weixin_51037408/article/details/121437506