在前端項目開發的時候，系統支持文件下載是前端開發中常用到的功能之一，當用戶訪問我們的網站時發現有自己需要的資源時可以將資源下載下來。文件下載主要有兩種形式，一種是通過文件地址下載，該文件可以存放在前端或者后端。另一種則是通過文件流下載，前端通過發送請求給后端并獲取后端文件流進行下載。

a標簽下載

download屬性：是html5中的a標簽的新特性，用來規定被下載的超鏈接目標。在a標簽中如果沒有申明download屬性的時a標簽的默會鏈接跳轉進行預覽（如txt , jpg , pdf ），當前瀏覽器不支持預覽的文件時則出現下載。當申明了download屬性之后瀏覽器會對href屬性鏈接的文件進行下載。download屬性與不支持H5的低版本瀏覽器不兼容且僅限于同源文件，如果是非同源download屬性會失效。比如引用第三方的網站內容、引用前后端分離的服務器內容、甚至本地測試引用的本地文件，download都會不起作用。如果你想測試該功能可以在本地開一個服務，將文件放同一服務中測試就可以了。

直接使用a標簽時只要在a標簽中添加download屬性，如果是非a標簽的話可以在出發事件的時候通過JAVAScript來創建一個隱藏a標簽下載，當我們點擊時觸發隱藏的a標簽下載事件。這里使用AppendChild和removeChild的處理是為了兼容Firefox瀏覽器。

XMLHttpRequest下載

需要了解XMLHttpRequest可以參考文章：JavaScript實戰001：XMLHttpRequest使用入門，這里我利用XMLHttpRequest對象來發送請求，用blob類型來接受后臺發過來的二進制類型文件。然后模擬a標簽創建隱藏的下載鏈接，通過URL.createObjectURL()方法創建一個指向blob對象的URL地址。

iframe下載

iframe是HTML標簽元素，可以用來創建內聯框架。iframe提供了src屬性用來規定在 iframe 中顯示的文檔的 URL，我們可以直接將文件地址拋給iframe，也可以賦值文件流地址給iframe。功能實現跟a標簽有點相似，創建一個隱藏的iframe標簽來實現文件的下載功能。使用文件地址下載需要注意的是瀏覽器支持預覽的文件類型無法下載（比如圖片、PDF文檔、text文本等會直接打開文件預覽），文件流下載只需將請求接口賦給src屬性，iframe會自動去請求該文件實現下載。

window.open下載

window.open()方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口，也可以用它來實現文件下載功能。而且這個比iframe更簡單，直接將文件地址或者請求接口賦給window.open(url)方法即可實現文件下載功能。但是有個缺點就是每次下載都會打開一個新的窗口來實現下載（想不跳轉可以嘗試window.location.assign()方法，用于加載一個新的文檔），而且如果使用文件地址下載的是瀏覽器支持預覽的文件類型無法下載（比如圖片、PDF文檔、text文本等會直接打開文件預覽）。

form表單提交下載

form表單是個比較常用的html表簽，用戶提交用戶信息，比如常見的登錄、注冊界面大部分都是通過form表單進行數據提交的。form表單所有要提交的數據都必須放在form標簽中，method屬性定義提交的方法（有get和post兩種提交方法），action屬性定義請求的地址。form標簽中支持input、menus、textarea、fieldset、legend 和 label 等元素，通過submit向服務器提交數據。這里我創建了form表單和input框，input用于輸入請求的參數，form用于提交數據請求。