這一期的需求里包括文件下載導(dǎo)出excel表格丁溅,現(xiàn)在總結(jié)一下:
1)window.open()和window.location.href
詳情鏈接:http://www.runoob.com/jsref/met-win-open.html
window.open()在下載文件的時候會打開一個新的頁面绰姻,同時會暴露鏈接地址拍谐, 而且會在下載文件的過程中献雅,訪問鏈接2次,雖然前端只下載了一次文件刹枉,但是服務(wù)端會生成2次文件檬洞。
2)form表單
用動態(tài)生成的form元素,實現(xiàn)表單提交雨效,并完成下載迅涮。注意此處不會ajax。原理僅僅是表單的提交徽龟。
由于jQery的ajax函數(shù)叮姑、及ajaxSubmit等函數(shù)的返回類型(dataType),只有xml、text据悔、json传透、html等類型,沒有'流'類型极颓,故我們只要實現(xiàn)ajax下載時朱盐,不能夠使用相應(yīng)的ajax函數(shù)進行文件下載。
不過我們可以通過js生成一個form菠隆,用這個form提交參數(shù)托享,并返回“流”,類型數(shù)據(jù)浸赫。在實現(xiàn)過程中闰围,頁面也沒有刷新
參考文檔:https://www.cnblogs.com/voiphudong/p/3284724.html
get請求
3)a標簽(兼容性比較差,chrome沒問題既峡。具體可以百度)
當需要在下載文件前做一些操作的話羡榴,則需要在點擊事件中創(chuàng)建a元素,此時最好不要在html中有a元素运敢,不然由于a標簽的默認事件和a.click()沖突校仑,會有一些小問題忠售。
4)iframe
如果是get方式的url下載鏈接,客戶端可以通過一個動態(tài)生成的隱藏的iframe來得到下載的二進制文件迄沫。原理:iframe有一個src屬性稻扬,其本質(zhì)就是發(fā)送http請求,get頁面或者數(shù)據(jù)羊瘩。
以上方式存在一些兼容問題以及瀏覽器直接解析.txt泰佳、.xml文件的風(fēng)險。所以我又在網(wǎng)上搜到了downloadjs插件尘吗,但是我在項目中用到的downloadjs并不好用
以上所有方法最好都把提交名利和點擊事件放到異步操作中逝她,比如說延時器。
4)插件download.js(具體請看官網(wǎng):http://danml.com/download.html)
npm install downloadjs
然后用的到的文件通過 import download from 'downloadjs' 引入
最后通過download()方法使用
下載調(diào)用的方法download(data, strFileName, strMimeType)對應(yīng)為:download("數(shù)據(jù)","想要起的名稱","Mime類型")睬捶,當不寫后面的兩個參數(shù)時黔宛,就可以下載指定文件了(不支持跨域),源碼很簡單就是沒有后面的參數(shù)擒贸,就會通過ajax發(fā)送一個get請求臀晃,獲取url的二進制流,然后把二進制流轉(zhuǎn)化為對象就完成了下載工作介劫。