HTML怎么設置頁面點擊下載?頁面點擊下載實現(xiàn)方法有哪幾種？

嘛咔叭咔 2021-06-17 10:08:52 瀏覽數(shù) (13390)

反饋

在前端的學習道路中，我們時不時的就會在網(wǎng)上進行下載我們需要的文件，那么就會有人問了“HTML怎么設置頁面點擊下載？”對于這個問題，下面是小編整理的相關資料大家可以作為參考。

方法一：使用?<a>?標簽

在我們學習前端知識中就知道?<a>?標簽是用來定義超鏈接，用于從一個頁面鏈接到另一個頁面的，而且?<a>?標簽最重要的屬性是?href?屬性用來指定鏈接的目標。我們?nèi)绻朐诰W(wǎng)頁中實現(xiàn)點擊下載我們可以加入這行代碼：?<a href="/user/test/xxxx.txt" download="文件名.txt">點擊下載</ a>?這樣用戶在點擊這個鏈接的時候就會直接下載文件。但是對于?txt、png、jpg?這些后綴文件在瀏覽器中是直接打開文件不會執(zhí)行下載，所以我們在代碼中加入了?download?屬性；我們來看下例子，代碼如下：

<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>a標簽屬性實現(xiàn)頁面下載</title>  
    </head>  
    <body>  
        <a href="321.png" download="test.png">點擊下載</a>    
    </body>  
</html>

結果如下：

我們可以在瀏覽器中查看我們的下載結果。當然如果我們需要從網(wǎng)頁上傳的圖片進行下載的話，可能就需要用到獲取主機域名：?location.hostname? 和獲取端口號：?location.port?.

方法二：使用按鍵監(jiān)聽

監(jiān)聽的話又分為兩種：

第一種是?window.open（）?，我們來看下代碼：

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

在這個方法中我們通過使用對已知的下載文件端口，通過?window.open（）?在網(wǎng)頁中打開下載。

第二種是表單提交我們先看代碼：

//方法二：通過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();  
        });

總結：

這就是小編分享的有關于：“HTML怎么設置頁面點擊下載？”問題的內(nèi)容。當然如果你有更好的方法也可以和大家分享一同學習。更多有關于前端的知識我們都可以在?W3cschool中進行學習和了解。

學習資料：

HTML教程網(wǎng)址：http://o2fo.com/html/

HTML參考手冊：http://o2fo.com/htmltags/

HTML CSS JavaScript 前端

0 人點贊