a标签有个download属性

在前端开发中，<a>标签最常见的作用是链接页面，实现页面跳转。其实，<a>标签还可以实现下载文件。

<a>标签如何实现下载文件呢？

我们先来看一下<a>标签的相关属性：

属性	值	描述
href	URL	规定链接指向的页面的 URL。
target	_blank _parent _self _top framename	规定在何处打开链接文档。
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属性的值会作为下载的文件的名字。

这个属性的兼容性，我还没有测试过，单兼容性，好像没有很好。

参考文章：

https://www.w3school.com.cn/tags/tag_a.asp

https://www.cnblogs.com/gja1026/p/9883743.html

a标签有个download属性相关推荐

js下载文件及前端使用a标签下载文件download属性失效问题
通常下载通过document.createElement创建虚拟a标签 function downloadFileUrl(val, url, fileName) {if (isVal) return ...
关于a标签添加了download属性下载文件失败的问题
话不多说,先上图相信各位大神看了图会明白,每次点击会下载,但是每次都是下载失败,未发现文件,请各位大佬指教-
jq 之 download下载图片或文件功能，以及一个神奇的download属性！
在一个项目中很常见的一个效果就是下载图片.文件功能,下边就介绍两种方法 1.用jq写下载的方法 //html中代码如下 <div><p>点击图片可下载</p>&l ...
超链接静态资源下载中 download属性无效解决方案
一般的,前端对后台的返回的静态数据链接下载是,可以通过动态生成a标签,并给对应标签上的download属性赋值,下载下来的文件就会以download的参数为文件名: 但是,如果是对CDN的链接数据进行 ...
a标签download属性无效_HTML从零开始——链接标签
链接(hyperlink)是互联网的核心.它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起. URL 是链接指向的地址.链接不仅可以指向另一个网页,也可以指向文本.图像.文件等 ...
[html] 使用a标签的download属性下载文件会有跨域问题吗？如何解决？
[html] 使用a标签的download属性下载文件会有跨域问题吗?如何解决? 最近刚遇到这个问题,后台返回的图片链接,点击按钮批量下载,a标签的 download 属性只对同源文件有效, 所以我们 ...
a标签download属性无效_使用这些 CSS 属性选择器来提高前端开发效率
如题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法.通常将 HTML属性放在方括号中,称为属性选择器,如下: ...
a标签 download属性不生效，一直还是预览图片BUG
问题描述:前段时间一直想使用前端的a标签实现文件下载,使用的a标签的download属性就能实现.可是FTP服务器的图片还是一直只能预览无法直接下载. #使用的地址是直接使用的IP端口的,原因就出在这 ...
IE浏览器a标签无法下载问题解决（IE浏览器a标签download属性不兼容问题解决）
IE浏览器a标签无法下载问题解决(IE浏览器a标签download属性不兼容问题解决) 参考文章: (1)IE浏览器a标签无法下载问题解决(IE浏览器a标签download属性不兼容问题解决) (2) ...

a标签有个download属性

a标签有个download属性相关推荐

最新文章

热门文章