HTML <a> download属性的用法（附带实例）

Web 网页中有如下一段 HTML 代码：

<a href="./example.jpg" target="_blank">案例图片</a>

请问点击“案例图片”字样的链接后会有什么效果？没错，会在新窗口打开一个图片并预览。

如果希望点击这个链接的行为不是预览图片，而是下载图片，该如何实现？

有人会想到使用 FileSaver.js（业界知名客户端资源下载解决方案），此方法确实可以满足需求，却不是最佳实现方法。

其实，浏览器内置了对应的能力，那就是 <a> 元素专属的 download 属性，无须使用 JavaScript 即可实现图片资源的一键下载。

比如可以这样：

<a href="./example.jpg" download>案例图片</a>

如果希望指定下载的图片名称，可以这样：

<a href="./example.jpg" download="some-name.jpg">案例图片</a>

需要注意的是，download 属性并不是万能的，如果链接的资源跨域了，则无法触发下载，除非浏览器无法打开这个链接资源，在这种情况下，无论是否设置了 download 属性，都会触发下载行为。例如：

<a href="./example.zip">下载压缩包</a>

此时，点击“案例图片”字样的链接会直接下载 example.zip 文件，因为浏览器无法解析 MIME Type 是 application/zip 的文件。

于是就有人想利用此特性触发某些跨域文件的下载，例如：

<a href="https://www.some-url.com/example.pdf">下载PDF</a>

在现代 Web 开发中，页面模板资源和静态资源都是分离的，属于不同的域名，也就是虽然资源跨域，但是配置的权限还在自己手中，所以就有人通过服务器配置，让 PDF 文件的 header（头信息）中的 Content-Type 值是某个浏览器不认识的 MIME Type 类型的，而触发下载。

虽然也能达到效果，但感觉像在耍小聪明，其实更好的做法是配置 Content-Disposition 的值为 attachment，Content-Type 和原始文件保持一致即可。例如，在 PHP 语言中：

header('Content-type: image/jpeg');
header("Content-Disposition: attachment; filename='download.jpg'");

由于相关内容与本节关联不大，因此不做进一步展开。