JS實現點擊按鈕,下載文件
阿新 • • 發佈:2018-11-04
ajax client exc 關閉 ams end 問題: bmi for
今天在實現下載功能時,後臺接口測試完成後,前臺在調用時發現,因為系統是基於token的,又不想把token顯示在url中,後來找到了一篇文章,講解了如何通過構造form表單提交請求後端接口,實現文件下載,原文地址:https://www.cnblogs.com/hamsterPP/p/6763458.html,內容如下:
PS:本文說的,並非如何用js創建流、創建文件、實現下載功能。
而是說的:你已知一個下載文件的後端接口,前端如何請求該接口,實現點擊按鈕、下載文件到本地。(可以是zip啦、excel啦都是一樣)
有兩個方法:window.open()和通過form表單來提交。
在線例子:https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html
方法一:window.open("下載文件的後端接口");
*html結構*
<button type="button" id="btn1">下載一個zip(方法1)</button> <button type="button" id="btn2">下載一個zip(方法2)</button>
/*js部分*/
var $eleBtn1 = $("#btn1"); var $eleBtn2 = $("#btn2"); //已知一個下載文件的後端接口:https://codeload.github.com/douban/douban-client/legacy.zip/master //方法一:window.open() $eleBtn1.click(function(){ window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master"); });
然而有個問題:瀏覽器會打開一個新窗口,然後迅速自動關閉,體驗非常不好。
方法二:通過form提交
由於ajax函數的返回類型只有xml、text、json、html等類型,沒有“流”類型,所以通過ajax去請求該接口是無法下載文件的,所以我們創建一個新的form元素來請求接口。
/*js部分*/
//方法二:通過form $eleBtn2.click(function(){ var $eleForm = $("<form method=‘get‘></form>"); $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master"); $(document.body).append($eleForm); //提交表單,實現下載 $eleForm.submit(); });
JS實現點擊按鈕,下載文件