vue axios 二進位制檔案下載
阿新 • • 發佈:2020-09-04
背景:
excel 檔案下載,後臺返回的是二進位制檔案
開始:
api.workerDownload({ ...this.queryString }).then(res => { const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) const url = window.URL.createObjectURL(blob) const link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', '人員資訊.xlsx') document.body.appendChild(link) link.click() document.body.removeChild(link) this.isDownloading = false }).catch(err => { this.isDownloading = false })
遇到的問題
開始在請求中沒有新增responseType, 導致後臺直接內容返回的二進位制
api.workerDownload({ ...this.queryString }).then(res => { const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) const url = window.URL.createObjectURL(blob) const link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', '人員資訊.xlsx') document.body.appendChild(link) link.click() document.body.removeChild(link) this.isDownloading = false }).catch(err => { this.isDownloading = false })
兩個地方 就是對於res沒有處理有區別 這樣就是導致匯出內容為[object, object]
解決: 在請求中新增 responseType: 'blob' , 這樣返回就是Blob形式的二進位制內容,處理的時候需要的是二進位制內容,所以取res.data 進行轉換。