需求說明

通過vue實(shí)現(xiàn)導(dǎo)出有兩種方式：
（1）后端返回的是一個(gè)地址，直接拼接打開下載就行
（2）后端返回的是文件流的形式，這個(gè)時(shí)候就需要在請(qǐng)求頭還有返回值的地方設(shè)置一下

一、后端返回的是地址

// 頁面代碼 <el-buttontype="primary"size="mini"class="filter-item"icon="el-icon-download"style="margin: 12px 20px 0 0; float: right"@click="onExportClick">導(dǎo)出 </el-button>onExportClick() {//導(dǎo)出方法exportDevices(this.listQuery) //導(dǎo)出接口.then(result => {const url = result.datawindow.open(url) //通過這個(gè)打開網(wǎng)頁就可下載導(dǎo)出}).catch(err => console.log(err)) }

二、后端返回的是文件流

常見問題

獲取接口之后，返回的是亂碼數(shù)據(jù)：例如下圖，此時(shí)并不能導(dǎo)出

解決辦法

（1）設(shè)置請(qǐng)求頭

/** * 按照部門人員導(dǎo)出（包括事件類型） * @param {*} pType * @returns */ export function exportDetailOrder(pType) {return request({url: '/exportEventDetailByDepart',method: 'get',responseType: 'blob', //需要在此處設(shè)置請(qǐng)求頭，設(shè)置請(qǐng)求的類型為blob文件流的形式params: {pType}}) }

（2）設(shè)置返回結(jié)果，處理返回我文件流

onExportClick() { //導(dǎo)出的方法exportDetailOrder(this.pType) //導(dǎo)出的接口.then(result => {console.log(result)const link = document.createElement('a') //創(chuàng)建a標(biāo)簽const blob = new Blob([result], { type: 'application/vnd.ms-excel' }) //設(shè)置文件流link.style.display = 'none'// 設(shè)置連接link.href = URL.createObjectURL(blob) //將文件流轉(zhuǎn)化為blob地址link.download = '處理人員維修工單統(tǒng)計(jì)報(bào)表'document.body.appendChild(link)// 模擬點(diǎn)擊事件link.click() //設(shè)置點(diǎn)擊事件}).catch(err => {console.log(err)})}

（3）附加說明
有的時(shí)候做到上述幾步還是不能導(dǎo)出，debugger之后，發(fā)現(xiàn)接口調(diào)用的時(shí)候直接走的.catch,沒走.then,
所以需要我們?cè)谌猪憫?yīng)攔截做一些判斷。

// 一般在utils下面的requext.js文件里面 export function validResponse(res, errorMessage) {if (res instanceof Blob) { //如果返回的是文件流的形式，直接return resreturn res} else if (res.code !== 200 && res.code !== 201 && res.code !== 204) {return Promise.reject(new Error(res.message || '發(fā)生錯(cuò)誤！'))} else {return res} }

總結(jié)

以上是生活随笔為你收集整理的vue实现导出excel的两种方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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