HTML锚标签下载属性在Firefox中不适用于jpg和png文件

Question

在我的Web应用程序中,我支持用户上传任何类型的文档(.png,.jpg,.docx,.xls,...)
我正在尝试为这些文档实现下载功能.

在Google Chrome中,如果单击"下载"链接,则会显示上述所有文档的"保存"对话框.

在使用Mozilla Firefox的docx和XLS做工精细,显示保存对话框,但对于巴纽和JPG格式下载标签未按预期即下载对话框或保存对话框没有出现,它直接打开图像.

我的代码:

<a href="/img/14340.jpg" download="14340.jpg">Download</a>

我已尝试过几乎所有在stackoverflow上提到并由Google建议的解决方案.但是他们中的大多数都说"检查firefox版本"和其他更改,例如: 尝试在触发点击之前将元素添加到DOM

从下载标签中删除文件名,它是布尔类型等.

我也尝试过关于锚标签和下载属性的w3schools课程,但似乎没有任何工作.

我的Mozilla Firefox版本是:38.0.5

PS:在chrome以及firefox .docs,.xls,.pdf文件中工作正常,问题是firefox中的.png和.jpg.

Answer 1

Firefox 将使用默认处理来处理 png 和 jpeg，即将它们内联到文档中。单击链接时，即使定义了下载属性，似乎也会使 Firefox 认为它有一个新图像，而忽略了它的下载方面。这可能是一个暂时的错误。

这是一种解决此问题的方法（诚然不是超级优雅），强制将图像解释为八位字节流。

它不能在 Stackoverflow 上内联工作，因此您必须在 jsFiddle 上测试它。

该代码执行以下操作：

• 扫描文档中的 a 标签。
• 那些已data-link设置的将附加一个通用的点击处理程序。
• 单击时，链接将从data-link属性中提取（hrefse 为 #），通过 XHR 作为 ArrayBuffer 加载（适用 CORS 要求，在本例中不是问题），并转换为对象 URL，并将 Blob 设置为 mime-类型octet/stream
• 对象 URL 设置为window.location重定向到此二进制数据，这将使浏览器要求用户下载该文件。

var links = document.querySelectorAll("a"), i = 0, lnk;

while(lnk = links[i++]) {
  if (lnk.dataset.link.length) lnk.onclick = toBlob;
}

function toBlob(e) {
  e.preventDefault();
  var lnk = this, xhr = new XMLHttpRequest();
  xhr.open("GET", lnk.dataset.link);
  xhr.responseType = "blob";
  xhr.overrideMimeType("octet/stream");
  xhr.onload = function() {
    if (xhr.status === 200) {
      window.location = (URL || webkitURL).createObjectURL(xhr.response);
    }
  };
  xhr.send();
}

标签示例：

<a href="#" data-link="image.jpg">Click to download</a>

缺点是您会丢失文件名中的扩展名。

使用 Data-URL 也可以做到这一点，但与使用 ArrayBuffer 和 blob 相比，data-url 的开销为 166%。