HTML如何设置页面点击下载

本篇内容主要讲解"HTML如何设置页面点击下载"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"HTML如何设置页面点击下载"吧!

方法一：使用标签

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

                                                点击下载          

我们可以在浏览器中查看我们的下载结果。当然如果我们需要从网页上传的图片进行下载的话，可能就需要用到获取主机域名：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 = $("
");              $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master");              $(document.body).append($eleForm);              //提交表单，实现下载              $eleForm.submit();          });

到此，相信大家对"HTML如何设置页面点击下载"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！