App下載

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

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

在前端的學(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>?這樣用戶在點(diǎn)擊這個(gè)鏈接的時(shí)候就會(huì)直接下載文件。但是對(duì)于?txt、png、jpg?這些后綴文件在瀏覽器中是直接打開文件不會(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)聽

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

第一種是?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è)中打開下載。

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

//方法二：通過(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://o2fo.com/html/

HTML參考手冊(cè)：http://o2fo.com/htmltags/


HTML CSS JavaScript 前端

0 人點(diǎn)贊