PS:本文說的，并非如何用js創(chuàng)建流、創(chuàng)建文件、實現(xiàn)下載功能。

而是說的：你已知一個下載文件的后端接口，前端如何請求該接口，實現(xiàn)點擊按鈕、下載文件到本地。（可以是zip啦、excel啦都是一樣）

有兩個方法：window.open()和通過form表單來提交。

在線例子：https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html

方法一：window.open("下載文件的后端接口");

*html結(jié)構(gòu)*

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

然而有個問題：瀏覽器會打開一個新窗口，然后迅速自動關(guān)閉，體驗非常不好。

方法二：通過form提交

由于ajax函數(shù)的返回類型只有xml、text、json、html等類型，沒有“流”類型，所以通過ajax去請求該接口是無法下載文件的，所以我們創(chuàng)建一個新的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);

            //提交表單，實現(xiàn)下載
            $eleForm.submit();
        });

總結(jié)

以上是生活随笔為你收集整理的JS实现点击按钮，下载文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。