详解HTML5中的download属性

html download属性

html5中我们想下载一张图片，可能想到的最简单的使用a标签实现点击按钮下载图片，如下:

但是，想法虽好，实际效果却不是我们想要的，因为浏览器可以直接浏览图片，因此，我们点击“下载”链接，并是不下载图片，而是在新窗口直接浏览图片。

于是，基本上，目前的实现都是放弃HTML策略，而是使用，例如php这样的后端语言，通过告知浏览器header信息，来实现下载。

header(‘Content-type: image/jpeg’);

header(“Content-Disposition: attachment; filename=’download.jpg'”);

那有没有什么只需要前端动动指头就能实现下载的方式呢？有，就是本文要介绍的download属性。

例如，我们希望点击“下载”链接下载图片而不是浏览，直接增加一个download属性就可以：

没错，你没有看错，就这么结束了

不仅如此，我们还可以指定下载图片的文件名：

如果后缀名一样，我们还可以缺省，直接文件名：

除了图片资源，我们还可以是PDF资源，或者txt资源等等。尤其Chrome等浏览器可以直接打开PDF文件，使得此文件格式需要download处理的场景越来越普遍。