2.1.3 实用的download属性

Web网页中有如下一段HTML代码，请问点击“案例图片”字样的链接后会有什么效果？

没错，会在新窗口打开一个图片并预览。

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

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

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

比如可以这样：

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

可以通过在浏览器中输入地址https://www.htmlapi.cn/2/1-5.html或扫码访问来体验上述效果。

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

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

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

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

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

由于相关内容与本书关联不大，因此不做进一步展开。 RQoILNawX6+kzKAhdyEXE0aq2ObtIUOeA9vD9+qouRbhJcoWTy8TsYulnkOBqb4p