接口调用方式下载文件

场景:
接到一个需求,有一个下载按钮,点击后要带token信息然后下载,正常下载都是打开一个网址自动进行了下载文件
接口请求方式下载文件也是第一次做,所以网上搜了一些方案进行了总结,同时也有一些坑进行了提醒

我们先来看一下主要代码 (代码浏览)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const blob = new Blob([res.data], {
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
// 文件格式
})
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = 'markone'
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, 'markone')
}

这里我们拿到返回的二进制文件(接口返回的都是二进制文件),把它塞进new Blob()中这里有两个参数要传,第一个是文件流,第二个是文件类型,常见 MIME 类型列表请参见 MDN - 常见 MIME 类型列表,我们这里的文件是docx所以就是application/vnd.openxmlformats-officedocument.wordprocessingml.document

接口记得要添加 responseType: 'blob' 属性,如果是封装的可以这么写

1
2
3
4
5
6
7
8
// 下载模板
export function downMsgTemp () {
return axios({
url: '/xxxx/down',
method: 'get',
responseType: 'blob'
})
}
  • 具体代码可以看下面演示

Tips: 过程可能会遇见的坑

1
2
3
4
5
>1.后端返回头中也要设置 application/vnd.openxmlformats-officedocument.wordprocessingml.document 类型

>2.请求没有加 responseType: 'blob 会导致下载后的文件打开失败

>3.加了 responseType: 'blob 有的ui框架会改掉,所以请禁用框架中的 import './mock'