前端导出文件，后端返回文件流过大直接干崩溃

前端导出文件

• 前端很常见的导出需求 导出world xlsx 甚至是zip

• 在我这个项目中是导出图片，图片量还是蛮大的，直接干崩溃了
  

• 我们这里是后端同学直接返回的是文件流

• 通过调用接口拿到文件流后直接调用下面的方法

  export function exportZip(res, name) {
    const blob = new Blob([res.data], {
      type: 'application/zip'
    })
    const reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = function (e) {
      const a = document.createElement('a')
      a.download = `${name}.zip`
      a.href = e.target.result
      // 兼容触发click
      const evt = document.createEvent('MouseEvents')
      evt.initEvent('click', true, true)
      a.dispatchEvent(evt)
    }
  }
  

  然后就出现上面的崩溃，分析后是因为文件流太大导致的，解决办法如下：

1. 直接让后端同学将zip准备好，调用接口返回的是一个地址 我们通过访问地址来下载zip

   	    <a @click="downFile()">{{文件名称}}</a>
   	    //下载方法
   	    downZip () {
   	      let a = document.createElement('a')
   	      a.href = '这里是后端同学返回的地址'
   	      a.click()
   	    }
   	```
   

2. 我们可以接收较大的文档流—在 github 上面找到了大神写的一个库

   • 首先安装（基于Vue，也可以去访问gitHub上下载：https://github.com/eligrey/FileSaver.js）

     npm install file-saver --save

   • 引入方法

     import { saveAs } from ‘file-saver’;

   • 通过调用上面引入的方法来接收很大的文件流 （修改我们上面的exportZip方法如下）

     export function exportZip(res, name) {
       const blob = new Blob([res.data], {
         type: 'application/zip'
       })
       saveAs(blob, name)
     }
     
     

再试试就搞定了