在前端項目開發(fā)的時候，系統(tǒng)支持文件下載是前端開發(fā)中常用到的功能之一，當用戶訪問我們的網(wǎng)站時發(fā)現(xiàn)有自己需要的資源時可以將資源下載下來。文件下載主要有兩種形式，一種是通過文件地址下載，該文件可以存放在前端或者后端。另一種則是通過文件流下載，前端通過發(fā)送請求給后端并獲取后端文件流進行下載。
a標簽下載
download屬性：是html5中的a標簽的新特性，用來規(guī)定被下載的超鏈接目標。在a標簽中如果沒有申明download屬性的時a標簽的默會鏈接跳轉(zhuǎn)進行預覽（如txt , jpg , pdf ），當前瀏覽器不支持預覽的文件時則出現(xiàn)下載。當申明了download屬性之后瀏覽器會對href屬性鏈接的文件進行下載。download屬性與不支持H5的低版本瀏覽器不兼容且僅限于同源文件，如果是非同源download屬性會失效。比如引用第三方的網(wǎng)站內(nèi)容、引用前后端分離的服務器內(nèi)容、甚至本地測試引用的本地文件，download都會不起作用。如果你想測試該功能可以在本地開一個服務，將文件放同一服務中測試就可以了。
直接使用a標簽時只要在a標簽中添加download屬性，如果是非a標簽的話可以在出發(fā)事件的時候通過JAVAScript來創(chuàng)建一個隱藏a標簽下載，當我們點擊時觸發(fā)隱藏的a標簽下載事件。這里使用AppendChild和removeChild的處理是為了兼容Firefox瀏覽器。
XMLHttpRequest下載
需要了解XMLHttpRequest可以參考文章：JavaScript實戰(zhàn)001：XMLHttpRequest使用入門，這里我利用XMLHttpRequest對象來發(fā)送請求，用blob類型來接受后臺發(fā)過來的二進制類型文件。然后模擬a標簽創(chuàng)建隱藏的下載鏈接，通過URL.createObjectURL()方法創(chuàng)建一個指向blob對象的URL地址。
iframe下載
iframe是HTML標簽元素，可以用來創(chuàng)建內(nèi)聯(lián)框架。iframe提供了src屬性用來規(guī)定在 iframe 中顯示的文檔的 URL，我們可以直接將文件地址拋給iframe，也可以賦值文件流地址給iframe。功能實現(xiàn)跟a標簽有點相似，創(chuàng)建一個隱藏的iframe標簽來實現(xiàn)文件的下載功能。使用文件地址下載需要注意的是瀏覽器支持預覽的文件類型無法下載（比如圖片、PDF文檔、text文本等會直接打開文件預覽），文件流下載只需將請求接口賦給src屬性，iframe會自動去請求該文件實現(xiàn)下載。
window.open下載
window.open()方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口，也可以用它來實現(xiàn)文件下載功能。而且這個比iframe更簡單，直接將文件地址或者請求接口賦給window.open(url)方法即可實現(xiàn)文件下載功能。但是有個缺點就是每次下載都會打開一個新的窗口來實現(xiàn)下載（想不跳轉(zhuǎn)可以嘗試window.location.assign()方法，用于加載一個新的文檔），而且如果使用文件地址下載的是瀏覽器支持預覽的文件類型無法下載（比如圖片、PDF文檔、text文本等會直接打開文件預覽）。
form表單提交下載
form表單是個比較常用的html表簽，用戶提交用戶信息，比如常見的登錄、注冊界面大部分都是通過form表單進行數(shù)據(jù)提交的。form表單所有要提交的數(shù)據(jù)都必須放在form標簽中，method屬性定義提交的方法（有g(shù)et和post兩種提交方法），action屬性定義請求的地址。form標簽中支持input、menus、textarea、fieldset、legend 和 label 等元素，通過submit向服務器提交數(shù)據(jù)。這里我創(chuàng)建了form表單和input框，input用于輸入請求的參數(shù)，form用于提交數(shù)據(jù)請求。
Django后臺接口
這里提供下Django的后臺文件請求接口，以上文件請求都是基于該接口實現(xiàn)的。接收請求方法為GET，請求參數(shù)為id（數(shù)據(jù)庫存儲的文件id），采用FileResponse方式返回的文件流信息（具體實現(xiàn)功能可以參考文章：Django實戰(zhàn)013：各種文件下載功能實現(xiàn)詳解）。
總結(jié)：
下載的方式方法有很多，以上只是JavaScript中常見的幾種下載方式。其實用ajax或者axIOS也可以實現(xiàn)下載，但是萬變不離其中，會JavaScript下載害怕不會別的么。以上下載方式個人覺得還是iframe比較簡單方便，請求最好還是通過文件流來實現(xiàn)，相對文件地址下載會更安全些。
