axios攔截處理
service.interceptors.response.use( response => { // 導出 const headers = response.headers if (headers['content-type'] === 'application/octet-stream;charset=utf-8') { return response.data } ... }, error => { return Promise.reject(error) } )
接口設置
export function export(params = {}) { return request({ url: '/export', method: 'post', data: params, responseType: 'blob' }) }
請求處理
exportClick () { export().then(res => { const content = res const blob = new Blob([content]) const fileName = '導出信息.xlsx' 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標簽的點擊事件從而文件下載