HTML download 属性

HTML download 语法

在 HTML 中，download 属性用于告诉浏览器当用户点击链接时，应该下载指定的文件，而不是直接打开它。当链接添加了 download 属性后，点击该链接，浏览器会将目标文件保存到用户的计算机上。

语法：

<a href="文件路径" download="文件名.扩展名">锚文本</a>

说明：

href 属性用于指定要下载的文件的 URL。

download 属性的值可以省略，也可以手动指定。

如果 download 属性没有指定文件名（即没有值），浏览器会根据 href 属性中的路径自动猜测文件名。
如果你为 download 属性指定了文件名（例如 download="example.pdf"），无论文件在服务器上的实际名称是什么，浏览器都会使用你指定的文件名来保存文件。

注意:

download 属性只能用于 a 和 area 这 2 种标签。
download 属性主要用于内部链接（同源链接）。对于外部链接（跨域链接），它的行为可能会受到浏览器安全策略的限制，通常只会强制下载而忽略指定的文件名。

HTML download 摘要

适用元素	a、area
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML download 示例

接下来，我们通过几个简单的例子来讲解一下 HTML download 属性是如何使用的。

示例 1：download 属性不指定文件名

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="/files/lvyenet.pdf" download>下载文件</a>
</body>
</html>

页面效果如下图所示。

download 属性不指定文件名

分析：

当 download 属性不指定值时，浏览器会尝试使用链接指向的文件名。对于这个例子来说，当我们点击链接时，浏览器会下载该文件，并通常以 “lvyenet.pdf” 作为文件名。

示例 2：download 属性指定文件名

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="/files/lvyenet.pdf" download="绿叶网.pdf">下载文件</a>
</body>
</html>

页面效果如下图所示。

download 属性指定文件名

分析：

虽然链接指向的文件原名是 “lvyenet.pdf”，但点击链接后，浏览器会将其重命名为 “绿叶网.pdf” 并下载。

示例 3：download 属性用于下载图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <a href="imgs/bird.jpg" download>下载图片</a>
</body>
</html>

页面效果如下图所示。

download 属性用于下载图片

分析：

对于 download 属性来说，它同样适用于下载图片文件。