什么是 Blob
Blob() 構(gòu)造函數(shù)返回一個新的 Blob 對象。blob 的內(nèi)容由參數(shù)數(shù)組中給出的值的串聯(lián)組成。

var aBlob = new Blob( array, options ); 

兼容性

mimeType[2]
在 Blob 的構(gòu)造函數(shù)中options參數(shù)的接受一個參數(shù)type,這個參數(shù)代表的是媒體類型,告訴瀏覽器是什么類型的文件,常見的有

{".3gp",    "video/3gpp"}, 
{".apk",    "application/vnd.android.package-archive"}, 
{".asf",    "video/x-ms-asf"}, 
{".avi",    "video/x-msvideo"}, 
{".bin",    "application/octet-stream"}, 
{".bmp",    "image/bmp"}, 
{".c",  "text/plain"}, 
{".class",  "application/octet-stream"}, 
{".conf",   "text/plain"}, 
{".cpp",    "text/plain"}, 
{".doc",    "application/msword"}, 
{".docx",   "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}, 
{".xls",    "application/vnd.ms-excel"}, 
{".xlsx",   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}, 
{".exe",    "application/octet-stream"}, 
{".gif",    "image/gif"}, 
{".gtar",   "application/x-gtar"}, 
{".gz", "application/x-gzip"}, 
{".h",  "text/plain"}, 
{".htm",    "text/html"}, 
{".html",   "text/html"}, 
{".jar",    "application/java-archive"}, 
{".java",   "text/plain"}, 
{".jpeg",   "image/jpeg"}, 
{".jpg",    "image/jpeg"}, 
{".js", "application/x-javascript"}, 
{".log",    "text/plain"}, 
{".m3u",    "audio/x-mpegurl"}, 
{".m4a",    "audio/mp4a-latm"}, 
{".m4b",    "audio/mp4a-latm"}, 
{".m4p",    "audio/mp4a-latm"}, 
{".m4u",    "video/vnd.mpegurl"}, 
{".m4v",    "video/x-m4v"}, 
{".mov",    "video/quicktime"}, 
{".mp2",    "audio/x-mpeg"}, 
{".mp3",    "audio/x-mpeg"}, 
{".mp4",    "video/mp4"}, 
{".mpc",    "application/vnd.mpohun.certificate"}, 
{".mpe",    "video/mpeg"}, 
{".mpeg",   "video/mpeg"}, 
{".mpg",    "video/mpeg"}, 
{".mpg4",   "video/mp4"}, 
{".mpga",   "audio/mpeg"}, 
{".msg",    "application/vnd.ms-outlook"}, 
{".ogg",    "audio/ogg"}, 
{".pdf",    "application/pdf"}, 
{".png",    "image/png"}, 
{".pps",    "application/vnd.ms-powerpoint"}, 
{".ppt",    "application/vnd.ms-powerpoint"}, 
{".pptx",   "application/vnd.openxmlformats-officedocument.presentationml.presentation"}, 
{".prop",   "text/plain"}, 
{".rc", "text/plain"}, 
{".rmvb",   "audio/x-pn-realaudio"}, 
{".rtf",    "application/rtf"}, 
{".sh", "text/plain"}, 
{".tar",    "application/x-tar"}, 
{".tgz",    "application/x-compressed"}, 
{".txt",    "text/plain"}, 
{".wav",    "audio/x-wav"}, 
{".wma",    "audio/x-ms-wma"}, 
{".wmv",    "audio/x-ms-wmv"}, 
{".wps",    "application/vnd.ms-works"}, 
{".xml",    "text/plain"}, 
{".z",  "application/x-compress"}, 
{".zip",    "application/x-zip-compressed"}, 
{"",        "*/*"} 

導(dǎo)出
我們需要調(diào)取接口來獲取導(dǎo)出文件的內(nèi)容,如果我們先后端分離的話，我們需要接口給我們返回Buffer, Blob, DOMString類型的數(shù)據(jù),DOMStrings會被編碼為UTF-8。

let blob = new Blob([接口返回的數(shù)據(jù)], { 
    type: "application/vnd.ms-excel;charset=utf-8" 
}); 

使用a標(biāo)簽,模擬點擊a標(biāo)簽完成導(dǎo)出功能,通過URL.createObjectURL()[3]方法創(chuàng)建一個下載的鏈接地址,最后在不需要的時候URL.revokeObjectURL釋放掉

let downloadElement = document.createElement("a"); 
let href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接 
downloadElement.href = href; 
document.body.appendChild(downloadElement); 
downloadElement.click(); //點擊下載 
document.body.removeChild(downloadElement); //下載完成移除元素 
window.URL.revokeObjectURL(href); //釋放掉blob對象 

文件名的設(shè)置
文件名稱通過報文頭設(shè)置content-disposition屬性設(shè)置,Content-Disposition參數(shù)：

attachment --- 作為附件下載 
inline --- 在線打開 

setHeader("Content-Disposition","inline; filename=文件名.mp3"); 
setHeader("Content-Disposition","attachment;filename=test.xls"); 

前端通過截取報文頭里的content-disposition字段獲取文件名稱:

downloadElement.download =decodeURI( 
    res.headers["content-disposition"].split("filename=")[1] 
) || ""; //下載后文件名 

完整代碼
這里的res代表后臺返回的數(shù)據(jù):

config: {url: "/ExportExcel", method: "post", data: "", headers: {…}, baseURL: "/api/", …} 
data: Blob {size: 5120, type: "application/vnd.ms-excel"} 
headers: {connection: "close", content-disposition: "attachment;filename=xxx.xls", content-encoding: "gzip", content-length: "1455", content-type: "application/vnd.ms-excel;charset=UTF-8", …} 
request: XMLHttpRequest {readyState: 4, timeout: 30000, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …} 
status: 200 
statusText: "OK" 

前端代碼

let blob = new Blob([res.data], { 
    type: "application/vnd.ms-excel;charset=utf-8" 
}); 
let downloadElement = document.createElement("a"); 
let href = window.URL.createObjectURL(blob); //創(chuàng)建下載的鏈接 
downloadElement.href = href; 
downloadElement.download = 
decodeURI( 
    res.headers["content-disposition"].split("filename=")[1] 
) || ""; //下載后文件名 
document.body.appendChild(downloadElement); 
downloadElement.click(); //點擊下載 
document.body.removeChild(downloadElement); //下載完成移除元素 
window.URL.revokeObjectURL(href); //釋放掉blob對象 

寫在最后
導(dǎo)出功能多種多樣,根據(jù)瀏覽器的不同和需求的不同會有不同的問題出現(xiàn)其中的坑還是比較多的,適合自己需求的才是最好的。