Html 带有文件名的下载属性不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33909763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Download attribute with a file name not working?
提问by Lunejy
Download attribute is used to make browsers download the resource an anchor points to rather than navigate to it. And as an option, a new file name for the downloaded file can be provided.
下载属性用于使浏览器下载锚点指向的资源而不是导航到它。作为一个选项，可以为下载的文件提供一个新的文件名。
Note that not all browsers support this. See http://caniuse.com/#feat=download
请注意，并非所有浏览器都支持此功能。见http://caniuse.com/#feat=download
Let's suppose we had the following anchor link:
假设我们有以下锚链接：
<a href="http://video-js.zencoder.com/oceans-clip.mp4" download="video.mp4"> download </a>
By clicking the link, I would expect to download the file with the name, video.mp4. But the actual file name, which is oceans-clip.mp4 was used for the downloaded file. Do you know why the new file name was not used here? (I tested this with Chrome)
通过单击该链接，我希望下载名为 video.mp4 的文件。但实际文件名，即oceans-clip.mp4 用于下载的文件。你知道为什么这里没有使用新的文件名吗？（我用 Chrome 测试过）
Thanks!
谢谢！
回答by Roger Dwan
According to HTML element reference->[a]
Can be used with blob: URLs and data: URLs, to make it easy for users to download content that is generated programmatically using JavaScript (e.g. a picture created using an online drawing Web app).
If the HTTP header Content-Disposition: is present and gives a different filename than this attribute, the HTTP header has priority over this attribute.
If this attribute is present and Content-Disposition: is set to inline, Firefox gives priority to Content-Disposition, like for the filename case, while Chrome gives priority to the download attribute.
This attribute is only honored for links to resources with the same-origin.
可以与 blob: URLs 和 data: URLs 一起使用，使用户可以轻松下载使用 JavaScript 以编程方式生成的内容（例如，使用在线绘图 Web 应用程序创建的图片）。
如果 HTTP 标头 Content-Disposition: 存在并给出与此属性不同的文件名，则 HTTP 标头优先于此属性。
如果此属性存在且 Content-Disposition: 设置为 inline，则 Firefox 优先考虑 Content-Disposition，就像文件名大小写一样，而 Chrome 优先考虑下载属性。
此属性仅适用于指向同源资源的链接。
It's not from the same-origin, therefore it won't work.
它不是来自同一起源，因此它不起作用。
回答by Himanshu Vaghela
This actually is possible with JavaScript, though browser support would be spotty. You can use XHR2 to download the file from the server to the browser as a Blob, create a URL to the Blob, create an anchor with its href property and set it to that URL, set the download property to whatever filename you want it to be, and then click the link. This works in Google Chrome, but I haven't verified support in other browsers.
这实际上可以通过 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();
