文件名的下载属性不起作用？

Question

Download 属性用于使浏览器下载锚点指向的资源，而不是导航到该资源。作为一个选项，可以为下载的文件提供一个新的文件名。

请注意，并非所有浏览器都支持此功能。见http://caniuse.com/#feat=download

假设我们有以下锚链接：

<a href="http://video-js.zencoder.com/oceans-clip.mp4" download="video.mp4"> download </a>

通过单击链接，我希望下载名为 video.mp4 的文件。但是实际的文件名是 oceans-clip.mp4 用于下载的文件。你知道为什么这里没有使用新的文件名吗？ （我用 Chrome 测试过）

谢谢！

Answer 1

根据HTML element reference->[a]

可与 blob: URLs 和 data: URLs 一起使用，以方便用户下载使用 JavaScript 以编程方式生成的内容（例如使用在线绘图 Web 应用程序创建的图片）。

如果 HTTP 标头 Content-Disposition: 存在并提供与此属性不同的文件名，则 HTTP 标头优先于此属性。

如果此属性存在且 Content-Disposition: 设置为内联，Firefox 会优先考虑 Content-Disposition，就像文件名的情况一样，而 Chrome 会优先考虑下载属性。

此属性仅适用于指向同源资源的链接。

不是同源的，所以不能用。

Answer 2

这实际上可以通过 JavaScript 实现，尽管浏览器支持参差不齐。您可以使用 XHR2 将文件作为 Blob 从服务器下载到浏览器，创建 Blob 的 URL，使用其 href 属性创建锚点并将其设置为该 URL，将下载属性设置为您想要的任何文件名是，然后单击链接。这适用于谷歌浏览器，但我尚未验证其他浏览器的支持。

window.URL = window.URL || window.webkitURL;

var xhr = new XMLHttpRequest(),
      a = document.createElement('a'), file;

xhr.open('GET', 'someFile', true);
xhr.responseType = 'blob';
xhr.onload = function () {
    file = new Blob([xhr.response], { type : 'application/octet-stream' });
    a.href = window.URL.createObjectURL(file);
    a.download = 'someName.gif';  // Set to whatever file name you want
    // Now just click the link you created
    // Note that you may have to append the a element to the body somewhere
    // for this to work in Firefox
    a.click();
};
xhr.send();