最近項目中有涉及到后端傳給前端blob數(shù)據(jù)鳄哭，然后前端處理進行下載的需求。查詢資料后纲熏，發(fā)現(xiàn)使用a標簽進行下載的兼容性是最好的窃诉，下面是具體的代碼：
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對象
當(dāng)我寫好代碼點擊下載按鈕時，發(fā)現(xiàn)下下來的是一個編輯文本赤套，并不是一個excel文件飘痛，發(fā)現(xiàn)還需要在axios請求時加上請求類型：
responseType: 'blob',
加上請求類型后發(fā)現(xiàn)可以正常下載，但是文件名都是text.xls容握，嘗試打印請求返回的response.headers發(fā)現(xiàn)里面只有下面幾種頭部宣脉，沒有Content-Disposition頭部。
{
cache-control: "no-cache"
content-type: "application/msexcel;charset=UTF-8"
pragma: "no-cache"
}
解決辦法是讓后端設(shè)置一個頭部:
Access-Control-Expose-Headers: Content-Disposition
該頭部的含義如下：
Access-Control-Expose-Headers
該字段可選剔氏。CORS請求時塑猖，XMLHttpRequest對象的getResponseHeader()方法只能拿到6個基本字段：Cache-Control、Content-Language谈跛、Content-Type羊苟、Expires、Last-Modified感憾、Pragma蜡励。如果想拿到其他字段，就必須在Access-Control-Expose-Headers里面指定。
添加上該頭部后凉倚，前端再下載就可以拿到Content-Disposition頭部里filename的值了兼都，該值就是文件名。將filename的值賦值給a標簽的download屬性稽寒，即可正常下載并展示對應(yīng)文件名扮碧。
