今天在項(xiàng)目開發(fā)的時(shí)候臨時(shí)要添加個(gè)導(dǎo)出功能我就寫了一份請(qǐng)求加導(dǎo)出得代碼，

代碼：

    //導(dǎo)出按鈕放開exportDutySummarizing (dataRangeInfo) {const params = {departmentName: dataRangeInfo.name,departmentQode: dataRangeInfo.qode}//拼接所需得urlconst baseUrl = Constants.SERVICES.duty + Constants.DUTY_SUMMARIZING_EXPORTthis.$axios({method: 'POST',url: utils.strFormat(baseUrl, {departmentName: params.departmentName,departmentQode: params.departmentQode}),headers: {Authorization: 'bearer ' + Cookies.get('Access-Token'),//token'Content-Type': 'application/json'},responseType: 'blob',//類型 這個(gè)必須要data: {//參數(shù)a: '1'}}).then((response) => {//公共的下載方法 在下面展示utils.download(response, dataRangeInfo.name + '名字.xlsx')}).catch(() => { })}//公共的下載方法util.download = function (data, filename) {if (!data && !filename) {return}let url = window.URL.createObjectURL(new Blob([data]))let link = document.createElement('a')link.style.display = 'none'link.href = urllink.setAttribute('download', filename)document.body.appendChild(link)link.click()}

?到這里請(qǐng)求文件流和導(dǎo)出文件得方法都已經(jīng)寫完了，這里面有的坑呢 打開就是返回得數(shù)據(jù)，大概就是你new Blob([data])得時(shí)候這個(gè)data是否是文件流，這個(gè)例子后端直接給我返回了文件流所以就直接使用了 一邊都是res.data這樣使用，再有就是responseType: 'blob',這個(gè)在請(qǐng)求文件流時(shí)請(qǐng)求頭中必須要寫，其他就沒什么了。

如果到這里下載下來的文件還是無法打開請(qǐng)往下看

下面就要說的就是mockjs了

mockjs 會(huì)攔截axios, 初始化的時(shí)候給攔截響應(yīng)設(shè)置了 responseType: ' ',

所以只需要把 mockjs注釋掉或者在.env把VUE_APP_BUILD_MODE設(shè)置成nomock中就可以了.

改完記得重啟項(xiàng)目！