web頁面實現(xiàn)文件下載的幾種方式

這一期的需求里包括文件下載導(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)化為對象就完成了下載工作介劫。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末徽惋,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蜕猫,更是在濱河造成了極大的恐慌,老刑警劉巖哎迄,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件回右,死亡現(xiàn)場離奇詭異,居然都是意外死亡漱挚,警方通過查閱死者的電腦和手機翔烁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來旨涝,“玉大人蹬屹,你說我怎么就攤上這事“谆” “怎么了慨默?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長弧腥。 經(jīng)常有香客問我厦取,道長,這世上最難降的妖魔是什么管搪? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任虾攻,我火速辦了婚禮铡买,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘霎箍。我一直安慰自己奇钞,他們只是感情好,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布漂坏。 她就那樣靜靜地躺著景埃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪樊拓。 梳的紋絲不亂的頭發(fā)上纠亚,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天,我揣著相機與錄音筋夏,去河邊找鬼蒂胞。 笑死,一個胖子當著我的面吹牛条篷,可吹牛的內(nèi)容都是我干的骗随。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼赴叹,長吁一口氣:“原來是場噩夢啊……” “哼鸿染!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起乞巧,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤涨椒,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后绽媒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蚕冬,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年是辕,在試婚紗的時候發(fā)現(xiàn)自己被綠了囤热。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡获三,死狀恐怖旁蔼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情疙教,我是刑警寧澤棺聊,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站贞谓,受9級特大地震影響躺屁,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜经宏,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一犀暑、第九天 我趴在偏房一處隱蔽的房頂上張望驯击。 院中可真熱鬧,春花似錦耐亏、人聲如沸徊都。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽暇矫。三九已至,卻和暖如春择吊,著一層夾襖步出監(jiān)牢的瞬間李根,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工几睛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留房轿,地道東北人。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓所森,卻偏偏與公主長得像囱持,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子焕济,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5纷妆? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,485評論 1 45
  • Spring Web MVC Spring Web MVC 是包含在 Spring 框架中的 Web 框架晴弃,建立于...
    Hsinwong閱讀 22,396評論 1 92
  • 灰塵在這書上安了家掩幢, 一層疊一層…… 你拿起這本書, 一會兒看這灰塵上鞠, 一會兒看這書……
    小劇在成長閱讀 204評論 4 7
  • 今日經(jīng)歷:疲憊
    磐石yy閱讀 172評論 0 0
  • 《奇葩說》里有個話題是——《分手該不該當面說旗国?》辯神們用很多觀點和論據(jù)來解釋該或不該的原因枯怖。 認真看完整期節(jié)目后注整,...
    伊晴_dream閱讀 812評論 0 1