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标签的点击事件从而文件下载