HTML: <a> download 属性

由网友 大卫 发布 阅读 6

HTML: <a> download 属性

<a> download 属性的使用方法,在线实例演示如何使用 <a> download 属性、浏览器的兼容性、语法定义及它的属性值详细介绍等。

HTML <a> 标签

在线示例

单击链接时下载文件(而不是导航到文件):

<!doctype html>
<html>
<head>
<title>html: <a> download属性的使用 - 大卫编程网(div.cn)</title>
</head>
<body>
<p>单击div.cn的logo以下载图像</p>
<a href="https://cdn.div.cn/static/uploads/code/2023-02-21/706a12a8a5ca5112bf8b6accac1721e9.png" download>
  <img src="https://cdn.div.cn/static/uploads/code/2023-02-21/706a12a8a5ca5112bf8b6accac1721e9.png" alt="div.cn" width="150" height="50">
</a>
</body>
</html>
测试看看 ‹/›

注意: Edge版本12,IE,Safari 10(或更早版本)或Opera版本12(或更早版本)不支持download属性。

浏览器兼容性

表格中的数字表示支持该属性的第一个浏览器的版本号。

元素




download14.013.020.010.115.0

定义和用法

download属性指定当用户单击超链接时将下载目标。
仅当设置了href属性时,才使用此属性。
该属性的值将是下载文件的名称。对允许的值没有限制,浏览器将自动检测正确的文件扩展名并将其添加到文件(.img,.pdf,.txt,.html等)中。
如果省略该值,则使用原始文件名。

HTML 4.01 与 HTML5 之间的区别

download 属性是HTML5中新增的 <a> 标签属性。

语法

        <a download="filename">

属性值

描述
filename指定文件名称。

更多示例

为下载属性指定一个值,该值将是下载文件的新文件名(“ div.cnlogo.png”而不是“ views.png”):

<!doctype html>
<html>
<head>
<title>html: <a> download属性的使用 - 大卫编程网(div.cn)</title>
</head>
<body>
<a href="https://cdn.div.cn/static/uploads/code/2023-02-21/706a12a8a5ca5112bf8b6accac1721e9.png" download="div.cnlogo">
  <img src="https://cdn.div.cn/static/uploads/code/2023-02-21/a3c373d51115289f3910f965d8acb188.png" alt="Views" width="300" height="200">
</a>
<p>请注意,下载文件的文件名将另存为“ div.cnlogo.jpg”,而不是“ views.png”。.</p>
</body>
</html>
测试看看 ‹/›

HTML <a> 标签

HTML: <a> coords 属性 HTML: <area> type 属性