1. 程式人生 > >JS實現點擊按鈕,下載文件

JS實現點擊按鈕,下載文件

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實現點擊按鈕,下載文件