前后端 文件下载

后端

// 响应头

content-disposition: inline;filename="文件名.xlsx"
content-type: application/octet-stream

前端

• a 标签下载

// 后端接口web地址 可以是带文件后缀的文件地址 'xxx.xlsx' 也可以是不带后缀的 blob流
<a href={'后端接口web地址'} downlaod='文件名.xlsx'>

缺点:

• 如果后端接口web地址与页面在同一个域下,那么 a 标签会携带请求头的 token,支持鉴权
• 如果后端接口web地址与页面不在同一个域下,那么 a 标签不会携带请求头的 token,不支持鉴权,需要选择 onClick 调接口的方式

onClick调接口

ajax用 responseType: 'blob' , fetch 用 res.blob()

fetch

fetch().then(res.blob())

ajax

<a
             
              onClick={(e) => {
                e.preventDefault()

                axios(`/api/download`, {
                  responseType: 'blob', // 跟请求头平级, 等价于 fetch 的 res.blob()
                }).then((response) => {
              
                  const url = URL.createObjectURL(response)
                  const a = document.createElement('a')
                  a.style.display = 'none'
                  a.href = url
                  a.download = record.original_file_name
                  document.body.appendChild(a)
                  a.click()
                  document.body.removeChild(a)
                  URL.revokeObjectURL(url)
                })
              }}
            >
              下载
            </a>