最近項(xiàng)目中有涉及到后端傳給前端blob數(shù)據(jù)，然后前端處理進(jìn)行下載的需求。查詢資料后，發(fā)現(xiàn)使用a標(biāo)簽進(jìn)行下載的兼容性是最好的，下面是具體的代碼：

let url = window.URL.createObjectURL(data) // 創(chuàng)建下載鏈接
let a = document.createElement('a')
document.body.appendChild(a)
a.href = url
a.download = 'text.xls'
a.click()
document.body.removeChild(a) // 下載完成移除元素
window.URL.revokeObjectURL(url) // 釋放blob對(duì)象

當(dāng)我寫好代碼點(diǎn)擊下載按鈕時(shí)，發(fā)現(xiàn)下下來的是一個(gè)編輯文本，并不是一個(gè)excel文件，發(fā)現(xiàn)還需要在axios請(qǐng)求時(shí)加上請(qǐng)求類型：

responseType: 'blob',

加上請(qǐng)求類型后發(fā)現(xiàn)可以正常下載，但是文件名都是text.xls，嘗試打印請(qǐng)求返回的response.headers發(fā)現(xiàn)里面只有下面幾種頭部，沒有Content-Disposition頭部。

{
    cache-control: "no-cache"
    content-type: "application/msexcel;charset=UTF-8"
    pragma: "no-cache"
}

解決辦法是讓后端設(shè)置一個(gè)頭部:

Access-Control-Expose-Headers: Content-Disposition

該頭部的含義如下：

Access-Control-Expose-Headers
該字段可選。CORS請(qǐng)求時(shí)，XMLHttpRequest對(duì)象的getResponseHeader()方法只能拿到6個(gè)基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。

添加上該頭部后，前端再下載就可以拿到Content-Disposition頭部里filename的值了，該值就是文件名。將filename的值賦值給a標(biāo)簽的download屬性，即可正常下載并展示對(duì)應(yīng)文件名。