前端导出文件
- 前端很常见的导出需求 导出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) } }
- 然后就出现上面的崩溃,分析后是因为文件流太大导致的,解决办法如下:
- 直接让后端同学将zip准备好,调用接口返回的是一个地址 我们通过访问地址来下载zip
<a @click="downFile()">{{文件名称}}</a> //下载方法 downZip () { let a = document.createElement('a') a.href = '这里是后端同学返回的地址' a.click() } ```
- 我们可以接收较大的文档流—在 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) }
再试试就搞定了