前端實現文件下載的各種方法總結
前言：最近項目中有不少關於文件上傳和下載相關的功能，開發過程中遇到不少的問題，在此對瀏覽器下載文件的功能進行總結，以備後續查看。
首先，明確一個基本的概念。出於安全方面的考慮，瀏覽器中運行的Js代碼是不可以“直接”對本地磁盤進行讀寫的，這個是瀏覽器的js引擎所限制的。但是由於瀏覽器本身作爲一個應用程序，它是可以操作文件系統的。NodeJs是運行在服務器端的js，它是可以直接操作本地文件系統的。
基於上邊的理解，前端實現下載功能一定是依賴於瀏覽器的特性的，而不是js的特性。
接下來我們來想想前端常見的下載操作有哪些。1、在某個頁面元素上直接右鍵-另存爲，彈出下載提示框。2、直接輸入網址，確定，彈出下載提示框。3、點擊頁面的鏈接（通常爲a標籤），彈出下載提示框。4、點擊某個確定按鈕，觸發業務邏輯後，彈出下載提示框。這些過程的本質都是瀏覽器向服務器發送請求，服務器返回文件流。但是瀏覽器和服務器的實現有好幾種方法。
服務器端的實現分兩種情況。
一種是文件已存在於服務器，那麼利用web容器的功能，直接訪問文件對應的路徑就可以返回文件流，針對於這種場景，在web.xml可以對返回文件的mime-type進行配置，MIME類型就是設定某種擴展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開。多用於指定一些客戶端自定義的文件名，以及一些媒體文件打開方式，但是瀏覽器具體是打開這種類型的文件，還是彈出下載提示框，這個是由瀏覽器具體的設置和瀏覽器特性決定的。比如你可能就會遇到服務器端提供的txt文件，在IE瀏覽器中，總是直接打開而不是直接下載的煩惱。
另一種是文件不存在，需要服務器端根據瀏覽器請求內容生成對應的文件（不用生產真正的文件），返回以流的方式返回給服務器。這種方式有幾個好處，一是節省服務器空間，二是省去了往磁盤上寫文件的時間，三是可以控制瀏覽器是否直接打開，還是彈出下載提示框。但是也有個不好的地方就是，文件流需要每次都生成。所以如果要下載文件是基本不變，且併發量較大的情況，可以生成後直接保存在文件服務器上，利用web容器的特性，在瀏覽器側直接請求文件地址進行下載。如果文件每次都不一樣，則可以採用第二種方案。
接下來談瀏覽器的實現方案。
針對直接請求文件地址的後臺實現。前端可以直接在瀏覽器中輸入相應的後臺文件地址來觸發下載，同等的可以利用<a>標籤的href屬性來觸發下載，也可以用window.location.href =URL進行下載，也可以利用iframe的src屬性進行下載。這些方法有個共同的特性就是都是採用的get請求。
針對於服務器需要現生產文件流的方式。前端可以使用<a>標籤的href屬性來向後臺發送下載請求。也可以用form表單提交的方式向後臺發送下載請求。使用form表單的方式較靈活，可以選在get或者post請求。可以攜帶負載參數。
另外還有一種使用js實現的思路，就是使用XMLHttpRequest來發送請求，形式上可以使用jquery、原生js等等封裝工具，但他們本質都是js的http請求，這種請求方式可以獲取到服務器端生成的字節流，此時數據是存在於js的內存中的，是不可以直接保存在本地的，我們可以利用Blob對象和window.URL.createobjectURL對象生成一個虛擬的URL地址，然後在利用瀏覽器的特性進行下載。IE10以上版本也提供有window.navigator.msSaveBlob類似的API可以供js調用。針對這種思路有個封裝的比較好的download.js可以直接使用。
請參考~~~