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

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测试了这个)

谢谢!

Answer 1

根据HTML元素引用 - > [a]

可以与blob一起使用:URL和数据:URL,使用户可以轻松下载使用JavaScript以编程方式生成的内容(例如,使用在线绘图Web应用程序创建的图片).

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

如果此属性存在并且Content-Disposition:设置为内联,则Firefox优先考虑Content-Disposition,例如文件名大小写,而Chrome优先考虑下载属性.

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

它不是来自同一起源,因此它不起作用.

Answer 2

这实际上可以通过JavaScript实现,但浏览器支持会有点不稳定.您可以使用XHR2将文件作为Blob从服务器下载到浏览器,创建Blob的URL,使用其href属性创建锚并将其设置为该URL,将download属性设置为您希望它的任何文件名是,然后单击链接.这适用于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();