html 中 a 链接的 download 属性的神奇使用

#html 中 a 链接的 download 属性的神奇使用

一般来说，我们在页面中提供下载的时候，都需要去配置一些服务端的东西，比如指定 zip 文件就通知浏览器下载这个文件。

但是，比如 .jpg 这样的图片文件，如何使它变成下载呢？浏览器可以直接打开访问这个文件的呀。

再比如，.pdf 文件，有的浏览器支持直接打开，有的浏览器不支持，则会下载。等等之类的问题。

好，现在的问题是，我需要方可点击这个链接，然后把一个资源下载下来，而不是用浏览器打开。

非常明确的需求。

之前我在开发 FengCMS 开源系统的时候，就涉及到这个问题。当时我们用PHP写了一个函数，凡是用这个函数包裹的链接，会强制浏览器去下载。

直到今天。。。。

神奇的 download 属性

<a href="https://vuejs.org/images/logo.png" download>下载 vue 的 LOGO</a>

• 1

如上代码，就可以直接把文件给下载下来了。

什么都没有做，只是给 a 加了一个 download 属性！！

并且不仅仅是这样的，我们还可以重命名文件。如下代码：

<a href="https://vuejs.org/images/logo.png" download="2017.png">下载 vue 的 LOGO</a>

• 1

通过给 download 添加属性名，就可以直接下载并且重命名为这个文件名了。

众里寻他千百度，蓦然回首，那人却在灯火阑珊处。

不知道浏览器兼容性如何， but, who care?

补充说明，经过测试，不能跨域下载图片，只能下载同域名下的资源。跨域规则和接口请求规则一致。

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。