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

December 09, 2023
测试
测试
测试
测试
1 分钟阅读

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?

继续阅读

更多来自我们博客的帖子

如何安装 BuddyPress
由 测试 December 17, 2023
经过差不多一年的开发,BuddyPress 这个基于 WordPress Mu 的 SNS 插件正式版终于发布了。BuddyPress...
阅读更多
Filter如何工作
由 测试 December 17, 2023
在 web.xml...
阅读更多
如何理解CGAffineTransform
由 测试 December 17, 2023
CGAffineTransform A structure for holding an affine transformation matrix. ...
阅读更多