a 标签的下载功能

a 标签的下载功能

之前做的项目中有一个 导出数据 的功能，实现代码如下：

<Button disabled={!dataSource.length} href=            
   {URI(URL.overallDetailExportUsingGet).query(Object.assign({},params, 
   {orderType,orderField}))} type="primary">
          导出数据
</Button>

使用的是 antd 里面的 Button组件，Button组件有一个 href 属性，点击跳转的地址，指定此属性 button 的行为和 a 链接一致。

查阅 W3C 文档中 a 标签的 href 属性，可得知 href 属性指示链接的目标。可以不使用该属性，如果不使用 href 属性，则不可以使用 download, hreflang, media, rel, target, type 属性。如果要使用这些属性，则必须要设置href属性。

download属性规定被下载的超链接目标，强制触发下载操作。该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 （.img .pdf .txt .html等等）。
如果只设置 href 属性而不设置 download 属性，则 a 标签此时只能跳转不能下载，不具有下载功能。
语法：

<a href= " ... " download="filename">

filename为文件名，download 属性值默认为空时，所下载的资源名字则为 href 属性值中文件本身的名字。download属性的值只能为字符串，即使不加引号，设置它的值为布尔值 true ，false ,也只会被当作是文件名为true、false。而 /和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。
举些栗子：
1、可以点击此链接下载图片，文件名为 w3logo.gif

<a href="/i/w3school_logo_white.gif" download="w3logo">
   <img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
</a>

2、可以点击此链接下载图片，文件名为 w3logo.png

<a href="/i/w3school_logo_white.gif" download="w3logo.png">
   <img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
</a>

3、可以点击此链接下载图片，文件名为 w3school_logo_white.gif

<a href="/i/w3school_logo_white.gif" download="">
   <img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
</a>

4、可以点击此链接下载图片，文件名为 w3school_logo_white.gif

<a href="/i/w3school_logo_white.gif" download>
   <img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
</a>

5、可以点击此链接下载图片，文件名为 true.gif

<a href="/i/w3school_logo_white.gif" download=true>
   <img border="0" src="/i/w3school_logo_white.gif" alt="W3School">
</a>

注意:

此属性仅适用于同源 URL。
搜索js实现下载的方式的时候无意中看见了一篇关于 download 属性实现原理的博客，地址为：
https://scarletsky.github.io/2016/07/03/download-file-using-javascript/
兼容性问题：这是H5的新特性，兼容性应该还不太好。w3C上表示只有 Firefox 和 Chrome 支持 download 属性。然而在Chrome75.0中，即使设置了 download 属性，点击链接页只是打开图片预览，不会下载图片，但是可以右击图片然后将图片另存为,只是 download 属性所设置的值无效，另存为的图片文件名不会更改为设置的值，无论 href 设置相对路径和绝对路径效果都一样。而在 Firefox70.0.1 中，设置绝对路径则显示无法打开该网站，改为相对路径则可以打开图片浏览，同样的可以另存为图片，也同样的设置 download 和它的值无效。
参考资料：
1、https://www.w3school.com.cn/tags/att_a_download.asp
2、https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
搜索了一下关于download属性的解释，推荐知乎上一位博主的文章，感觉讲得很详细：
浅析 HTML5 中的 download 属性 - wanonder的文章 - 知乎https://zhuanlan.zhihu.com/p/58888918