<a> 的下载属性的替代实现答案

【问题标题】：Alternative implement to download attribute of <a><a> 的下载属性的替代实现
【发布时间】：2019-05-06 20:05:30
【问题描述】：

正如 W3schools 上的 example 所示，

<a href="/images/myw3schoolsimage.jpg" download="w3logo"></a>

适用于chrome，下载文件名重命名为“w3logo.jpg”，但似乎只适用于静态文件。如果我将 href 更改为

<a href="https://raw.githubusercontent.com/jquery/jquery/master/LICENSE.txt" download="w3logo"></a>

看起来像静态文件，重命名功能不起作用。

而且我们也知道，即使使用静态文件，它也只适用于少数资源管理器。

是否有任何替代解决方案，同时进行下载和重命名？用一点js就可以了，只有html更好。

【问题讨论】：

【解决方案1】：

download 属性仍未被所有浏览器完全支持，并且支持它的浏览器并不总是遵循默认文件名。这通常发生在要下载的文件不是来自same origin 作为运行脚本的服务器时。欲了解更多信息，请查看HTML spec for the download attribute

【讨论】：

【解决方案2】：

正如the MDN page about Anchor tag 中提到的，下载属性是在 HTML5 中引入的，并非所有浏览器都正确支持。这是caniuse link，以获取有关支持的更多信息。

即使启用了支持，也几乎没有限制。第一个是如果响应头中有Content-Disposition 头，那么它将优先于文件名的下载属性。

由于与 Firefox 不同，Chrome 优先考虑 download 属性，因此您的示例会出现第二个限制，即文件 url 必须来自同源。您提到的网址来自不同的来源，因此下载属性根本没有效果。据我所知，最新版本的 Chrome 和 Firefox 都有这个限制。

【讨论】：