js如何下載後臺傳過來的base64文件

1、<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賦值，即至關於爲下載文件命名

 你們能夠在編輯器裏面試試。雖然它仍是連接，但可點擊這個連接，而後把一個資源下載下來，而不是再像以往用瀏覽器打開。

有了這個功能，咱們就能夠作一些事了。

 

2、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);      //   用完即拋棄，內存很小的

　　})

   

 

　　　　原創文章，轉載請附連接