在前端开发中,<a>标签最常见的作用是链接页面,实现页面跳转。其实,<a>标签还可以实现下载文件。
<a>标签如何实现下载文件呢?
我们先来看一下<a>标签的相关属性:
属性 | 值 | 描述 |
href | URL | 规定链接指向的页面的 URL。 |
target |
|
规定在何处打开链接文档。 |
rel | text | 规定当前文档与被链接文档之间的关系。 |
download | filename | 规定被下载的超链接目标。 |
type | MIME type | 规定被链接文档的的 MIME 类型。 |
hreflang | language_code | 规定被链接文档的语言。 |
可以看到<a>标签有一个down属性,我们可以利用这个属性来下载资源。
<a href="../../love.png" download="picture">下载</a>
点击这个<a>标签就可以下载href所链接的图片了,而且图片的名字变成了picture.png了。
所以当我们需要下载而不是链接时,可以给<a>加上download属性,那么点击链接就会下载了,而且download属性的值会作为下载的文件的名字。
这个属性的兼容性,我还没有测试过,单兼容性,好像没有很好。
参考文章: