通过接口获取并下载文件流

下载文件的方法

1、前端总是将二进制流转化为二进制对象Blob，然后下载到本地

请求格式

axios({
    method: 'get',
    url: process.env.VUE_APP_BASE_API + url,
    params: params,
    responseType: 'blob',
  })
  .then((res) => {
    name =
      name ||
      (res.headers['content-disposition'] || '')
        .replace(/.*filename=("|')?/, '')
        .replace(/("|')$/, '') ||
      'download'
    download(res.data, window.decodeURI(name))
  })

获取的res的内容为
data Blob文件,其[[Prototype]]是ArrayBuffer
headers.content-disposition 包含文件的名称

blob

将流文件下载到本地

const download = (data, name) => {
  const url = URL.createObjectURL(data)
  const aLink = document.createElement('a')
  aLink.download = name
  aLink.href = url
  aLink.dispatchEvent(new MouseEvent('click', {}))
}

2、将响应类型改为responseType: 'arraybuffer'

打印返回结果
data是一个Arraybuffer

arrayBuffer

此时下载的文件是损坏的，这是因为没有转化为Blob文件格式
此时需要如下操作

const download = (data, name) => {
  // 将Arraybuffer 转化为 Blob
  let blob = new Blob([data], {type: `application/vnd.ms-excel;charset=utf-8`});
  const url = URL.createObjectURL(blob)
  const aLink = document.createElement('a')
  aLink.download = name
  aLink.href = url
  aLink.dispatchEvent(new MouseEvent('click', {}))
}