js之：點擊按鈕實現下載

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();
        });