最近做項目呜呐，遇到轉(zhuǎn)文件流成excel并保存到本地的需求就斤，期間踩過一些坑，分享出來蘑辑，希望幫到有希望的朋友洋机；
一、安裝file-saver洋魂，這里我用的是的npm绷旗，其他方式請自行百度
npm install file-saver --save????
二、在需要的頁面引用
import { saveAs } from 'file-saver'
三副砍、發(fā)起請求
這一步關(guān)鍵點是在發(fā)起請的請求頭衔肢，一定要加上responseType: 'arraybuffer' 或者 responseType: 'blob'，且與params同級（重要是地方豁翎，敲黑板啦）角骤，開始我都是放在headers里面，撓頭半天心剥；在這后端定義的是get方式請求邦尊，下面是我的代碼：
axios.get({
????url:'api/export/file',
????method: 'get',
????params,
????headers,
????responseType: 'arraybuffer'? // blob也可以硼控，看實際情況
}).then(res => {
? ? const data =?res.data //流文件實體，根據(jù)自己的情況獲取
? ??let blob = new Blob([data], {
? ? ? ? ? ? type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
? ? });
? ? const fr = new FileReader()
? ? fr.readAsText(blob)
? ? fr.onload = (e) => {
? ? ? ? ? ? if (e.target.result.indexOf('code') !== -1) {// 導(dǎo)出報錯
? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? ? ?type: 'warning',
? ? ? ? ? ? ? ? ????message: JSON.parse(e.target.result).message
? ? ? ? ? ? ? })
? ? ? ? ? ? } else {// 導(dǎo)出成功
? ? ? ? ? ? ? const fileName = Math.floor(Math.random() * 10000)
? ? ? ? ? ? ? let type = 'application/octet-stream'
? ? ? ? ? ? ? const file = new Blob([blob], { type })
? ? ? ? ? ? ? saveAs(file, `${fileName}.xlsx`)
? ? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? ? ????type: 'success',
? ? ? ? ? ? ? ????? message: '操作成功胳赌，正在下載文件...'
? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? }
})
一般vue-cli都會集成axios牢撼，axios請自行封裝，這里就不贅述了疑苫；
完成保存后熏版，瀏覽器就會下載文件到你瀏覽器一般下載的目錄中，希望對大家有幫助捍掺，不喜勿噴撼短！
