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

Question

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

请注意，并非所有浏览器都支持此功能。请参见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测试过）

谢谢！

- Lunejy

Answer 1

根据HTML元素参考->[a]：

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

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

如果存在此属性并将Content-Disposition:设置为inline，则Firefox优先考虑Content-Disposition，就像文件名情况一样，而Chrome则优先考虑download属性。

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

由于不是来自相同源，因此它不起作用。

- Roger Dwan

---

如果你正在使用亚马逊S3，那真是太糟糕了... - undefined

Answer 2

尽管浏览器支持可能不一定完全，但使用JavaScript实现这一点是有可能的。您可以使用XHR2将文件作为Blob从服务器下载到浏览器中，创建一个指向该Blob的URL，创建一个带有href属性的锚点并将其设置为该URL，将下载属性设置为所需的任何文件名，然后单击该链接即可。这在Google Chrome中可以正常工作，但我没有验证其他浏览器的支持情况。

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();

- Himanshu Vaghela

---

谢谢你的评论，但我想知道这里是否没有内存不足的问题。在你描述的方法中，视频必须先完全下载到内存缓冲区（即Blob），然后才能写入文件。因此，如果多个视频同时下载，我认为有些会因为内存不足而失败。你怎么看？ - Lunejy

@alzaj 这必须是同源的吗？即使在Chrome上？ - oldboy

在Safari中，它会显示“无法加载资源：帧加载中断”。 - Rishabh Agrahari

为了使其正常工作，要么是相同的来源（因此下载属性也将起作用），要么服务器已配置CORS以授权请求，除了在内存中加载大文件可能会导致的内存问题。 - rupps

它对我有用！应该选择它作为答案。它甚至具有跨源性。 - AJ Smith 'Smugger'