vue項目中，後端返回文件流，axios發送post請求下載文件

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標籤的點擊事件從而文件下載