HTML页面点击下载文件的方法实例

1.使用标签来完成

这样当用户打开浏览器点击链接的时候就会直接下载文件

但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”;

以下为例子

移到标签标签上可以显示文件路径,根据路径提示进行文件路径的补全

立即学习“前端免费学习笔记(深入)”;

若需从网页上传的图片中进行下载  可能会用到以下方法

获取主机域名:

location.hostname

获取端口号:

location.port

2.使用按钮进行监听

按钮监听又可以分为两种方法,

一是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");          });

二是表单提交

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

相关推荐:

php实现当前页面点击下载文件的实例代码

以上就是HTML页面点击下载文件的方法实例的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545874.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:34:38
下一篇 2025年12月21日 17:34:52

相关推荐

  • html的文字图片怎样垂直居中

    这次给大家带来html的文字图片怎样垂直居中,html的文字图片垂直居中的注意事项有哪些,下面就是实战案例,一起来看一下。 方法一 :设置盒子高度与line-height相同,本方法适用于一行文字。 图片垂直居中 和一行文字对齐 用属性vertical-align 小图标和文字垂直对齐,小图标作为背…

    好文分享 2025年12月21日
    000
  • 在HTML中各类型盒子的基线应如何确定

    这次给大家带来在html中各类型盒子的基线应如何确定,在html中各类型盒子的基线确定的注意事项有哪些,下面就是实战案例,一起来看一下。 确定盒子的基线的规则 1.1    确定inline-block的基线 The baseline of an ‘inline-block’…

    好文分享 2025年12月21日
    000
  • HTML中关于盒模型的总结

    这次给大家带来html中关于盒模型的总结,html中关于盒模型的注意事项有哪些,下面就是实战案例,一起来看一下。 关于怪异盒模型和标准盒模型的对比   关于怪异盒模型盒标准盒模型之间的转换 相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章! 相关阅读: 怎样让按钮点击后出现“点”的…

    2025年12月21日
    000
  • HTML基础面试题汇总

    本文主要和大家分享html基础面试题及答案,希望能帮助到大家。 1 DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。标准模式(Standards mode)以浏览器…

    好文分享 2025年12月21日
    000
  • html中meta标签及用法详解

    元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。本文主要给大家介绍了html中meta标签及用法详解,感兴趣的朋友一起看看吧,希望能帮助到大家。 Html中meta标签 一、meta标签 含义    元素 可提供有关页面的元信息(meta-i…

    好文分享 2025年12月21日
    000
  • html如何实现鼠标悬停提示A标签内容

    这次给大家带来html的如何实现鼠标悬停提示a标签内容,html实现鼠标悬停提示a标签内容的注意事项有哪些,下面就是实战案例,一起来看一下。 鼠标经过悬停于对象时提示内容(title属性内容)换行排版方法,html title 换行方法总结。 html的title属性默认是显示一行的.如何换行呢? …

    好文分享 2025年12月21日
    000
  • html两秒跳转至其他页面

    这次给大家带来html两秒跳转至其他页面,html两秒跳转至其他页面的注意事项有哪些,下面就是实战案例,一起来看一下。 无标题文档{$rows}两秒后自动跳转!{$val.id} —— {$val.name} 点击返回继续查询! 相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关…

    好文分享 2025年12月21日
    000
  • 在HTML中如何让版权符号更美观

    这次给大家带来在html中如何让版权符号更美观,在html中让版权符号更美观的注意事项有哪些,下面就是实战案例,一起来看一下。 一、发现问题 ©是html的中版权的符号,但是字体选择的不对会带来一些问题。如果是宋体,这个符号显示的就是很奇怪的一个符号。 二、解决问题 Copyright ©…

    好文分享 2025年12月21日
    000
  • HTML中划分框窗有哪些常用属性

    这次给大家带来html中划分框窗有哪些常用属性,html中划分框窗的常用属性的注意事项有哪些,下面就是实战案例,一起来看一下。 框架是网页画面分成几个框窗(不同的窗口对应不同页面以几个网页的形式显示),同时取得多个 src的地址。页面所有框架标记需要放在一个总起的 html 档,这个档案只记录了该框…

    好文分享 2025年12月21日
    000
  • HTML中的滚动条有哪些使用技巧

    这次给大家带来html中的滚动条有哪些使用技巧,html中的滚动条的哪些使用技巧的注意事项有哪些,下面就是实战案例,一起来看一下。 我说一个现象大家一定常见 ,就是在网页中删除一些东西的时候滚动条往往还在删除东西之前的位置,而不是非常不人性化的跑到那一页的顶部,那么这是怎么实现的呢?其实办法很简单,…

    好文分享 2025年12月21日
    000
  • HTML中移动端有哪些布局方案

    最近我研究了淘宝,天猫和网易彩票163的wap主页样式布局,今天给大家来总结一些移动端布局方案,并且分析一下所使用技术的利弊。 注意:代码运行是file协议,在chrome里不支持引用本地文件,会提示跨域错误,可以用firefox或者Safari打开 wty2368 移动端布局方案探究 研究了淘宝,…

    好文分享 2025年12月21日
    000
  • 在HTML中关于元素居中有哪些需要注意的事项

    这次给大家带来在html中关于元素居中有哪些需要注意的事项,在html中关于元素居中需要注意的事项有哪些,下面就是实战案例,一起来看一下。 不使用定位     水平居中:text-align = center;(可继承)     竖直居中:margin:0 auto;(块级元素)     其他居中:…

    好文分享 2025年12月21日
    000
  • html语义化有那些作用

    这次给大家带来html语义化有那些作用,html语义化的注意事项有哪些,下面就是实战案例,一起来看一下。 所有人都知道html即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。   html标签中的大部分都是由“语义化”标签所担任   那么,它有什么用…

    好文分享 2025年12月21日
    000
  • Html中有哪些标记文字注释的符号

    这次给大家带来html中有那些标记文字注释的符号,使用html中的标记文字注释的符号的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代…

    好文分享 2025年12月21日
    000
  • html中如何使用js来获取本地系统时间

    这次给大家带来html中如何使用js来获取本地系统时间,html中使用js来获取本地系统时间的注意事项有哪些,下面就是实战案例,一起来看一下。 代码如下: var now=new Date() document.write(1900+now.getYear()+”-“+(now.getMonth()…

    好文分享 2025年12月21日
    000
  • 怎样使用html网页中的锚点

    这次给大家带来怎样使用html网页中的锚点,使用html网页中的锚点的注意事项有哪些,下面就是实战案例,一起来看一下。 锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标记通…

    好文分享 2025年12月21日
    000
  • html的内联元素和块级元素有哪些不同

    这次给大家带来html的内联元素和块级元素有哪些不同,使用html的内联元素和块级元素的注意事项有哪些,下面就是实战案例,一起来看一下。 html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念: 块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥…

    好文分享 2025年12月21日
    000
  • html area图片热点如何使用

    这次给大家带来html area图片热点如何使用,使用html area图片热点的注意事项有哪些,下面就是实战案例,一起来看一下。 标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:…

    好文分享 2025年12月21日
    000
  • html里table表数据如何转为Json格式

    这次给大家带来html里table表数据如何转为json格式,html里table表数据转为json格式的注意事项有哪些,下面就是实战案例,一起来看一下。 表数据转 Json 格式的javascript函数如下 var keysArr = new Array(“key0”, “key1”,”key2…

    好文分享 2025年12月21日
    000
  • 怎么在HTML中隐藏一段文字

    这次给大家带来怎么在html中隐藏一段文字,在html中隐藏一段文字的注意事项有哪些,下面就是实战案例,一起来看一下。 文字隐藏代码,在HTML中隐藏某段文字 需要隐藏的文字……. 隐藏文字 相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章! 相关阅读: html里怎样实现…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信