HTML怎么设置页面点击下载?页面点击下载实现方法有哪几种？

嘛咔叭咔 2021-06-17 10:08:52 浏览数 (11158)

在前端的学习道路中，我们时不时的就会在网上进行下载我们需要的文件，那么就会有人问了“HTML怎么设置页面点击下载？”对于这个问题，下面是小编整理的相关资料大家可以作为参考。

方法一：使用<a>标签

在我们学习前端知识中就知道<a>标签是用来定义超链接，用于从一个页面链接到另一个页面的，而且<a>标签最重要的属性是href属性用来指定链接的目标。我们如果想在网页中实现点击下载我们可以加入这行代码：<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</ a>这样用户在点击这个链接的时候就会直接下载文件。但是对于txt、png、jpg这些后缀文件在浏览器中是直接打开文件不会执行下载，所以我们在代码中加入了download属性；我们来看下例子，代码如下：

<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>a标签属性实现页面下载</title>  
    </head>  
    <body>  
        <a href="321.png" download="test.png">点击下载</a>    
    </body>  
</html>

结果如下：

我们可以在浏览器中查看我们的下载结果。当然如果我们需要从网页上传的图片进行下载的话，可能就需要用到获取主机域名：location.hostname 和获取端口号：location.port.

方法二：使用按键监听

监听的话又分为两种：

第一种是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（）在网页中打开下载。

第二种是表单提交我们先看代码：

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

总结：

这就是小编分享的有关于：“HTML怎么设置页面点击下载？”问题的内容。当然如果你有更好的方法也可以和大家分享一同学习。更多有关于前端的知识我们都可以在W3cschool中进行学习和了解。

学习资料：

HTML教程网址：https://www.w3cschool.cn/html/

HTML参考手册：https://www.w3cschool.cn/htmltags/