03.axios 发送请求，后端返回文件数据流，保存为本地文件

刚开始拿到这个项目时，对这个文件下载不太清楚，接口传入的是文件的id值

然后我弄了个简单文件试了一下，返回的是文件内容

本来后面打算试试有没有js保存为文件的方法，然后想到文本格式返回的是文件内容，那pdf和其他的文档返回的是啥呢

于是又弄了一个pdf试一下，然后结果就是下面这个样子了

然后就去网上搜了一下关于这种返回保存文件的方式

一种是IE浏览器下的，用的谷歌浏览器，就没有用这个

var win = window.open('about:blank', '_blank', 'top=500')
win.document.open('text', 'utf-8')
win.document.write(res)
win.document.execCommand('SaveAs', true, params.FILENAME)
win.close()

后面一又看到一个保存的方式，用的  blob ，之前没听说过，原文： JS处理文件流 

var elink = document.createElement('a')
var blob = new Blob([res])
elink.download = params.FILENAME
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
elink.click()

改好之后又去试了一下，文本类型的保存没有问题，但是pdf文件是空白，xlsx文件提示损坏，发现又不行，于是又继续搜索去了

后面终于发现一个写的和我这个项目比较相似的博客了，传送门：vue项目中，后端返回文件流，axios发送post请求下载文件 

接口设置里面，这里请求方法是get，换成post以后没效果

export function downFilebyID(params) {
  return request({
    url: 'File/DownLoadFile?ID=' + params.ID,
    method: 'get',
    params,
    responseType: 'blob'  //返回类型
  })
}

然后是axios的拦截处理，原文是判断类型是不是文件流

const headers = response.headers
    if (headers['content-type'] === 'application/octet-stream;charset=utf-8') {
      return response.data
    }

然后我去看了一下，发现没有这个字段，不过其他的请求返回值都是有erron来判断返回结果的

文件流的只有内容

所以就判断erron的值是不是undefined

// 拦截状态码。
if (res.erron === undefined) {
   return res
}

最后是请求处理

const content = res
const blob = new Blob([content])
const file = params.FILENAME
if ('download' in document.createElement('a')) {
  const elink = document.createElement('a')
  elink.download = file
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  URL.revokeObjectURL(elink.href)
  document.body.removeChild(elink)
} else {
  navigator.msSaveBlob(blob, file)
}

然后发现返回的response.data是这个样子的，

改好以后pdf等文件保存后也能正常显示了