一、<a>標簽的作用
相信大部分人都知道<a>鏈接再簡單不過了，跳轉嘛，跳轉到另外一個頁面，這誰不知道。
當然這這是一部分， <a> 標簽定義超鏈接，用於從一個頁面鏈接到另一個頁面。<a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。大家所熟知的一部分，
其實還有 如果將<a>鏈接加上download，那么一切都有點不一樣了。
比如：<a href="https://www.baidu.com/img/baidu_jgylogo3.gif" download>下載 百度的圖片</a>
<a href="https://www.baidu.com/img/baidu_jgylogo3.gif" download="牛逼.png">下載 百度的圖片</a> /// 如果為download賦值，即相當於為下載文件命名
大家可以在編輯器里面試試。雖然它還是鏈接，但可點擊這個鏈接，然后把一個資源下載下來，而不是再像以往用瀏覽器打開。
有了這個功能，我們就可以做一些事了。
二、new FileReader()
在做點特別的事前我們再來看看這個 api; new FileReader()，光看起來就像一個文件什么的東東對吧，其實它是一個下載文件的構造函數。將后台傳過來的base64字符串轉碼成文件
那到底有什么用呢，你可能這樣問，很明顯了嘛，配合我們的 <a> 標簽，不就是想下什么下載什么不。比如你想去個什么....網站（嘿嘿）
既然做下載我們就只關注它幾個和文件下載有關的方法。
readAsBinaryString 將文件讀取為二進制碼
readAsDataURL 將文件讀取為 DataURL （這也是例子程序中用到的方法）
readAsText [encoding] 將文件讀取為文本
readAsText：該方法有兩個參數，其中第二個參數是文本的編碼方式，默認值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結果即是這個文本文件中的內容。
readAsBinaryString：該方法將文件讀取為二進制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件。
readAsDataURL：這是例子程序中用到的方法，該方法將文件讀取為一段以 data: 開頭的字符串，這段字符串的實質就是 Data URL，Data URL是一種將小文件直接嵌入文檔的方案。這里的小文件通常是
指圖像與 html 等格式的文件。
在常規 HTTP 響應中，Content-Disposition響應標頭是指示內容是否預期在瀏覽器中內聯顯示的標題，即，作為網頁或作為網頁的一部分或作為附件下載並且本地保存。
在一個multipart/form-data正文中，HTTP Content-Disposition通用標題是一個標題，可以在多部分主體的子部分中使用，以提供有關它適用的字段的信息。子部分由標題中定義的邊界分隔Content-Type。用於身體本身，Content-Disposition沒有任何作用。（單純是個名字而已，嫌麻煩可忽略，雖然會用到，但是不妨礙它沒用....）
下面直接擼干貨：：
此處省略一萬行代碼，這樣看起來像大牛.....haha
ajax請求后，記得返回需為 blob格式文件
ajax......then(res => {
let reader = new FileReader();
reader.readAsDataURL(res.bodyBlob); // 轉換為base64，可以直接放入a標簽href
reader.onload = function (e) {
// 轉換完成，還記得我們上文的<a>標簽嗎，動態創建一個a標簽用於下載
let a = document.createElement('a');
let fileName = '' ; //下載總得有個名字吧。
if (res.headers.map['Content-Disposition'] != null && res.headers.map['Content-Disposition'].length > 0) {
fileName = res.headers.map['Content-Disposition'][0];
} else if (res.headers.map['content-disposition'] != null && res.headers.map['content-disposition'].length > 0) {
fileName = res.headers.map['content-disposition'][0];
} else {
fileName = excel.xlsx;
}
fileName = fileName.substring(fileName.lastIndexOf(".")); // 一般從后台傳過來的值我們都得修改的，截取想要的文件名，當然視情況而定，萬一不用改呢
a.download = fileName; // 貼心的為 <a>標簽的 download 賦個值 其實是這樣了 <a download="fileName"> </a>
a.href = e.target.result; // 貼心的為 <a>標簽的href 賦個值 其實是這樣了 <a href="e.target.result" download="fileName"> </a> 是不是和上文一樣，只需小手輕輕一按。
但是<a>里面沒值找不到？沒關系讓瀏覽器來，先加到瀏覽器里
// $("body").append(a); // 修復firefox中無法觸發click，如果firefox下載不了，我是沒問題
document.querySelector("body").appendChild(a);
a.click(); /// 再
// $(a).remove(); 修復firefox中無法觸發click，如果firefox下載不了，我是沒問題
document.querySelector("body").removeChild(a); // 用完即拋棄，內存很小的
})
原創文章，轉載請附鏈接