文件下载功能

一、业务场景：
点击按钮，下载文件

二、问题描述：
使用普通的axios请求，拿到的数据是表头，无法直接下载下来

三、具体实现步骤：
（1）创建axios实例

export const pureAxios = axios.create({
  baseURL: baseURL, // api base_url
  timeout: 6000 // 请求超时时间
})

（2）挂载实例
pureAxios.interceptors.request.use(config => {
// const token = storage.get(ACCESS_TOKEN)
// if (token) {
// config.headers[‘token’] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
// }
return config
}, err)

（3）需要引入下载文件函数

export function resolveBlobData (res) {
  const aLink = document.createElement('a')
  const blob = new Blob([res.data], { type: '' })
  // 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
  const contentDisposition = decodeURI(res.headers['content-disposition'])
  const fileName = contentDisposition.split('=')[1]
  aLink.href = URL.createObjectURL(blob)
  // 设置下载文件名称
  aLink.setAttribute('download', fileName)
  document.body.appendChild(aLink)
  aLink.click()
  document.body.removeChild(aLink)
  window.URL.revokeObjectURL(aLink.href)
}

（4）请求接口部分

  export function loadCluesMod(parameter) {
    pureAxios({
      url: '/api/clue/creator/download/temp',
      method: 'get',
      responseType: 'blob'    //这里是必须的
    }).then(res => {
    //请求成功后调用下载函数
      resolveBlobData(res)
    }).catch((r) => {
      console.error(r)
    })
  }

四、效果展示：

你已经成功了，撒花。
今天的分享到此结束，欢迎小伙伴们一起交流