發(fā)送post請(qǐng)求下載文件
先說一下背景：這是一個(gè)以vue作為框架并用Axios來發(fā)送http請(qǐng)求的項(xiàng)目擅腰。我想要實(shí)現(xiàn)用axios來發(fā)送post請(qǐng)求，然后服務(wù)器會(huì)返回的response是一個(gè)文件流，我希望能將這個(gè)文件流寫入excel,從而實(shí)現(xiàn)該excel文件的下載良姆。
在網(wǎng)上查閱了相關(guān)資料后蚁堤，我在Axios官方文檔給出的一個(gè)不大完整的示例中看到一種基于node原生模塊fs的處理方案，我考慮到是否可以采用這種方式來處理我接受到的文件流刽辙，可是經(jīng)過嘗試窥岩，發(fā)現(xiàn)行不通。
以下是我親試可以實(shí)現(xiàn)的一種方案：
exportData () {
? ? ? ? const form = this.getSearchForm() // 要發(fā)送到后臺(tái)的數(shù)據(jù)
? ? ? ? axios({ // 用axios發(fā)送post請(qǐng)求
? ? ? ? ? method: 'post',
? ? ? ? ? url: '/user/12345', // 請(qǐng)求地址
? ? ? ? ? data: form, // 參數(shù)
? ? ? ? ? responseType: 'blob' // 表明返回服務(wù)器返回的數(shù)據(jù)類型
? ? ? ? })
? ? ? ? ? .then((res) => { // 處理返回的文件流
? ? ? ? ? ? const content = res
? ? ? ? ? ? const blob = new Blob([content])
? ? ? ? ? ? const fileName = '測試表格123.xls'
? ? ? ? ? ? if ('download' in document.createElement('a')) { // 非IE下載
? ? ? ? ? ? ? const elink = document.createElement('a')
? ? ? ? ? ? ? elink.download = fileName
? ? ? ? ? ? ? elink.style.display = 'none'
? ? ? ? ? ? ? elink.href = URL.createObjectURL(blob)
? ? ? ? ? ? ? document.body.appendChild(elink)
? ? ? ? ? ? ? elink.click()
? ? ? ? ? ? ? URL.revokeObjectURL(elink.href) // 釋放URL 對(duì)象
? ? ? ? ? ? ? document.body.removeChild(elink)
? ? ? ? ? ? } else { // IE10+下載
? ? ? ? ? ? ? navigator.msSaveBlob(blob, fileName)
? ? ? ? ? ? }
? ? ? ? })
? ? ? }
