HTML如何设置页面点击下载

发布时间:2022-02-22 16:36:15 作者:iii
来源:亿速云 阅读:237

本篇内容主要讲解“HTML如何设置页面点击下载”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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如何设置页面点击下载”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. HTML实现页面点击下载文件的方法有哪些
  2. HTML页面点击下载文件的实现方法有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:php中null和empty的区别有哪些

下一篇:python怎么实现批量邮件推送且可支持html邮件格式

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》