1. 程式人生 > >Axios傳送post請求下載檔案

Axios傳送post請求下載檔案

傳送post請求下載檔案

先說一下背景:這是一個以vue作為框架並用Axios來發送http請求的專案。我想要實現用axios來發送post請求,然後伺服器會返回的response是一個檔案流,我希望能將這個檔案流寫入excel,從而實現該excel檔案的下載。

在網上查閱了相關資料後,我在Axios官方文件給出的一個不大完整的示例中看到一種基於node原生模組fs的處理方案,我考慮到是否可以採用這種方式來處理我接受到的檔案流,可是經過嘗試,發現行不通。

以下是我親試可以實現的一種方案:

exportData () {
        const form = this.getSearchForm() //
要傳送到後臺的資料 axios({ // 用axios傳送post請求 method: 'post', url: '/user/12345', // 請求地址 data: form, // 引數 responseType: 'blob' // 表明返回伺服器返回的資料型別 }) .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 物件 document.body.removeChild(elink) } else { // IE10+下載 navigator.msSaveBlob(blob, fileName) } })
}

這裡用了Blob物件,上面的寫法就是用從伺服器接收到的檔案流(content-type:application/octet-stream)建立了一個blob物件,並使用該blob 建立一個指向型別陣列的URL,將該url作為a標籤的連結目標,然後去觸發a標籤的點選事件從而實現表格下載。