记录文件上传所遇到的一次问题

平时，我们也知道，web前端处理导出文件有两种方法。

• 1、服务端返回完整URL，直接打开URL即可；
• 2、服务端返回数据流，前端解析数据流完成导出功能；

服务端返回完整URL，直接打开URL

    location.herf = url

服务端返回数据流，前端解析数据流完成导出功能

这里因为使用的ajax,来跟服务端进行通信，且需要在请求头传入token,所以方案一不可行。

// utils/exportExcel.js
export function exportExcel(url, name) {
  const blob = new Blob([url], { type: 'application/vnd.ms-excel' })
  const fileName = `${name}.xlsx`
  if ('download' in document.createElement('a')) { // 非IE下载
    const link = document.createElement('a')
    link.download = fileName
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(link.href) // 释放URL 对象
    document.body.removeChild(link)
  } else { // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }
}

// api/export.js
import request from '@/utils/request'

export function export (params) {
    return request.post('/common/export', params)
}

调用

const res = await api.export(params)
exportExcel(res, '下载excel')

结果

下载下来的是乱码

分析下来，是axios的responseType传值问题导致，responseType默认值为application/json,而文件下载是以流的形式来下载，所以只需改变responseType的值为blob即可。

所以对api/export.js进行改造：

// api/export.js
import request from '@/utils/request'

export function export(params) {
    return request.post('/common/export', params, {responseType: 'blob'})
}

最后，下载成功！