App下載

HTML怎么設(shè)置頁(yè)面點(diǎn)擊下載?頁(yè)面點(diǎn)擊下載實(shí)現(xiàn)方法有哪幾種?

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

在前端的學(xué)習(xí)道路中,我們時(shí)不時(shí)的就會(huì)在網(wǎng)上進(jìn)行下載我們需要的文件,那么就會(huì)有人問(wèn)了“HTML怎么設(shè)置頁(yè)面點(diǎn)擊下載?”對(duì)于這個(gè)問(wèn)題,下面是小編整理的相關(guān)資料大家可以作為參考。


方法一:使用?<a>?標(biāo)簽

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

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

結(jié)果如下:


我們可以在瀏覽器中查看我們的下載結(jié)果。當(dāng)然如果我們需要從網(wǎng)頁(yè)上傳的圖片進(jìn)行下載的話,可能就需要用到獲取主機(jī)域名:?location.hostname? 和獲取端口號(hào):?location.port?.


方法二:使用按鍵監(jiān)聽(tīng)

監(jiān)聽(tīng)的話又分為兩種:

第一種是?window.open()?,我們來(lái)看下代碼:

var $eleBtn1 = $("#btn1");  
        var $eleBtn2 = $("#btn2");  
        //已知一個(gè)下載文件的后端接口: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");  
        });  

在這個(gè)方法中我們通過(guò)使用對(duì)已知的下載文件端口,通過(guò)?window.open()?在網(wǎng)頁(yè)中打開(kāi)下載。

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

//方法二:通過(guò)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);  
            //提交表單,實(shí)現(xiàn)下載  
            $eleForm.submit();  
        });  

總結(jié):

這就是小編分享的有關(guān)于:“HTML怎么設(shè)置頁(yè)面點(diǎn)擊下載?”問(wèn)題的內(nèi)容。當(dāng)然如果你有更好的方法也可以和大家分享一同學(xué)習(xí)。更多有關(guān)于前端的知識(shí)我們都可以在?W3cschool中進(jìn)行學(xué)習(xí)和了解。

學(xué)習(xí)資料:

HTML教程網(wǎng)址:http://m.hgci.cn/html/

HTML參考手冊(cè):http://m.hgci.cn/htmltags/


0 人點(diǎn)贊