HTML <a> download属性使用方法详解


本文摘自PHP中文网,作者藏色散人,侵删。

点击下载文件或者图片是我们在网页上寻找资源的日常操作,那么我们自己在设计HTML页面的时候,如果需要实现让别人下载文件的功能,我们该如何是去做呢?其实这种功能实现并没有很复杂,反而是很简单的。本篇文章就给大家详细得介绍a标签中的download属性,只要掌握了这个属性就可以实现点击下载文件图片等功能。

一段简单的带有a标签download属性的html代码示例如下:

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>HTML a标签download属性使用示例</title>

</head>

<body>

<p>给a标签添加了download属性:</p>

<a href="/test/img/2.png"  download="2.png">点击下载</a>

</body>

</html>

我在本地测试效果如下图:

a14e35c46a1cf2428e2aa9c86a9a678.png

如图我是用火狐浏览器进行访问的,并且成功下载打开图片。相信大家如果自己动手测试的话,对download属性已经有所概念。这里a标签href的值是表示,你要下载某个文件或图片的地址。download的值则表示你要下载保存的文件名称或者图片名称。

但是大家也要注意html中a download属性并不是在所有浏览器里奏效的。目前a download属性只在火狐和谷歌浏览器有效。其余的如IE、Safari、Opera浏览器都是没有用的。

综上所述,所以想要实现点击下载某文件或图片只要掌握好a标签中的download属性用法即可,如果你只给a标签中加了href的文件地址而没有download属性的话,那么就只会出现预览的效果而无法下载!

本篇文章具有一定的参考价值,希望对有需要的朋友有一定的帮助!

以上就是HTML <a> download属性使用方法详解的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html <a> download属性使用方法详解

更多相关阅读请进入《a标签download属性》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...