前端導(dǎo)出文件

• 前端很常見(jiàn)的導(dǎo)出需求 導(dǎo)出world xlsx 甚至是zip

• 在我這個(gè)項(xiàng)目中是導(dǎo)出圖片，圖片量還是蠻大的，直接干崩潰了
  

• 我們這里是后端同學(xué)直接返回的是文件流

• 通過(guò)調(diào)用接口拿到文件流后直接調(diào)用下面的方法

  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// 兼容觸發(fā)clickconst evt = document.createEvent('MouseEvents')evt.initEvent('click', true, true)a.dispatchEvent(evt)} }

  然后就出現(xiàn)上面的崩潰，分析后是因?yàn)槲募魈髮?dǎo)致的，解決辦法如下：

直接讓后端同學(xué)將zip準(zhǔn)備好，調(diào)用接口返回的是一個(gè)地址 我們通過(guò)訪問(wèn)地址來(lái)下載zip

<a @click="downFile()">{{文件名稱}}</a>//下載方法downZip () {let a = document.createElement('a')a.href = '這里是后端同學(xué)返回的地址'a.click()}```

我們可以接收較大的文檔流—在 github 上面找到了大神寫的一個(gè)庫(kù)

• 首先安裝（基于Vue，也可以去訪問(wèn)gitHub上下載：https://github.com/eligrey/FileSaver.js）

  npm install file-saver --save

• 引入方法

  import { saveAs } from ‘file-saver’;

• 通過(guò)調(diào)用上面引入的方法來(lái)接收很大的文件流 （修改我們上面的exportZip方法如下）

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

再試試就搞定了

總結(jié)

以上是生活随笔為你收集整理的前端导出文件，后端返回文件流过大直接干崩溃的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。