我们在下载文件的时候,后端同学给我们的一般是二进制的文件。
如果按照普通的请求方式处理,前端也没办法直接下载。
首先,下载获取到二进制流了以后,应该把二进制流转换成Blob类型,然后IE浏览器使用模拟点击的方式去下载,非IE浏览器可以使用navigator浏览器对象的方法来下载文件

    const content = res   // res为获取到的二进制文件
    const blob = new Blob([content],{type: 'application/x-xls'})
    const fileName = '模板.xls'
    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)
    }

这里我模拟的是一个excel表格下载。但是下载下来以后,我发现文件是损坏的,打不开。在排除了是后端同学给的文件问题后,又回到了下载这里请求出的问题。
后来发现,是服务器返回信息的时候,需要告诉浏览器指定的responseType类型。
responseType类型有几种text,json,buffer,blob。其中后两种都是文件格式,如果不指定的话,一般默认的是text格式。
在向服务器发送请求的时候,我们给请求带上responseType:blob。然后下载下来的文件就不会出问题了。

  function createAPI(baseURL = BaseUrl) {
    return function (conf) {
    conf = conf || {}
    return instance({
      responseType: conf.responseType||'',  // 这里是重点,指定类型
      url: conf.url,
      baseURL: baseURL,
      method: conf.method,
      headers:conf.headers||{},
      ...conf.opts
     })
    }
  }

以上是封装过后的API类型,自己根据自己封装的方法就可以使用了

标签: axios, excel, axios下载, blob, buffer

评论已关闭