html 中 a 链接的 download 属性的神奇使用
一般来说,我们在页面中提供下载的时候,都需要去配置一些服务端的东西,比如指定 zip
文件就通知浏览器下载这个文件。
但是,比如 .jpg
这样的图片文件,如何使它变成下载呢?浏览器可以直接打开访问这个文件的呀。
再比如,.pdf
文件,有的浏览器支持直接打开,有的浏览器不支持,则会下载。等等之类的问题。
好,现在的问题是,我需要方可点击这个链接,然后把一个资源下载下来,而不是用浏览器打开。
非常明确的需求。
之前我在开发 FengCMS
开源系统的时候,就涉及到这个问题。当时我们用PHP写了一个函数,凡是用这个函数包裹的链接,会强制浏览器去下载。
直到今天。。。。
神奇的 download 属性
<a href="https://img.uali.cn/20231209/logo.png" download>下载 vue 的 LOGO</a>
如上代码,就可以直接把文件给下载下来了。
什么都没有做,只是给 a
加了一个 download
属性!!
并且不仅仅是这样的,我们还可以重命名文件。如下代码:
<a href="https://img.uali.cn/20231209/logo.png" download="2017.png">下载 vue 的 LOGO</a>
通过给 download
添加属性名,就可以直接下载并且重命名为这个文件名了。
众里寻他千百度,蓦然回首,那人却在灯火阑珊处。
不知道浏览器兼容性如何, but, who care?