HTML定位标记下载属性不适用于jpg和png文件的Firefox [英] HTML anchor tag download attribute not working in Firefox for jpg and png files

问题描述

在我的web应用程序中，我支持用户上传任何类型的文档（.png，.jpg，.docx，.xls，...）。我试图为这些文档实现下载功能。


在Google Chrome浏览器中，如果您点击下载链接保存对话框显示以上所有文档。


在Mozilla Firefox的docx和xls工作正常，保存对话框显示但为 .png 和 .jpg strong>下载标记不能正常工作，即下载对话框或保存对话框不会出现，直接打开该图像。

我的代码：

 < a href =/ img / 14340.jpgdownload =14340.jpg>下载< / a> 
  

我已经尝试了几乎所有在stackoverflow上提到的解决方案，并由Google建议。但他们大多数人说，检查Firefox的版本和其他变化，如：
尝试添加元素到DOM之前触发点击

从下载标记中删除文件名它是布尔类型和等。

我也尝试了 w3schools关于锚点标记和下载属性的课程， a>但是没有任何东西似乎正在工作。

我的Mozilla Firefox版本是：38.0.5

PS：在Chrome以及Firefox中，.docs，.xls，.pdf文件工作正常，问题在于firefox中的.png和.jpg。 Firefox将使用默认处理来处理png和jpeg，默认处理是在文档中内联它们。当点击一个链接时，即使下载属性被定义，似乎也会让Firefox认为它有一个新的图像，忽略了它的下载方面。这可能是一个临时的错误。

这是一个方法，虽然不是超级优雅，但是要解决这个问题，迫使图像被解释为一个八位字节流。

它不能在Stackoverflow上工作，所以你必须

代码如下：

• 扫描文档中的标签。 那些具有 data-link 点击链接时，链接将从 data-link 属性中提取（ href 是se到＃），通过XHR作为ArrayBuffer加载（CORS要求适用，在这种情况下不是问题），并将其转换为Object-URL，Blob设置为mime-type octet / stream


• 将对象URL设置为 window.location 到这个二进制数据，这将使浏览器问你ser来下载文件。

var links = document .querySelectorAll（a），i = 0，lnk; （lnk = links [i ++]）{
if（lnk.dataset.link.length）lnk.onclick = toBlob;

while


函数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>点击下载< / a> ;


缺点是您会忽略扩展名。

这也可以使用Data-URL，但是与使用ArrayBuffer和blob相比，data-url的开销是166％。

In my web application I have supported user to upload any type of document (.png, .jpg, .docx, .xls, ... )
I'm trying to implement download functionality for these documents.

In Google Chrome if you click on Download link Save dialog is shown for all above documents.

In Mozilla Firefox for docx and xls works fine, Save dialog is shown but for .png and .jpg download tag is not working as expected i.e., download dialog or Save dialog does not appear, it directly open that image.

My code:

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

I have tried almost all solutions mentioned on stackoverflow and suggested by Google. But most of them says that 'check firefox version' and other changes like: try adding the element to the DOM before triggering the click

Remove filename from download tag it is of boolean type and etc.

I have also tried w3schools lesson on anchor tag and download attribute but nothing seems to be working.

My Mozilla Firefox version is: 38.0.5

P.S.: in chrome as well as in firefox .docs, .xls, .pdf documents work fine, problem is for .png and .jpg in firefox.

解决方案

Firefox will handle png and jpeg using default handling, which is to inline them in the document. When clicking a link, even if download attribute is defined, seem to make Firefox think it has a new image ignoring the download aspect of it. This may be a temporary bug.

Here is a way, admittedly not super-elegant, to get around this problem forcing the image to be interpreted as an octet-stream.

It does not work inline on Stackoverflow so you have to test it on jsFiddle.

The code does the following:

• Scans the document for a-tags.
• Those which has data-link set will have a common click-handler attached.
• When clicked the link is extracted from the data-link attribute (href is se to #), loaded as an ArrayBuffer via XHR (CORS requirements applies, not a problem in this case), and is converted to an Object-URL with the Blob set to mime-type octet/stream
• The Object URL is set as window.location to redirect to this binary data which will make the browser ask user to download the file instead.

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

Example tag:

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

The drawback is that you'll loose the extension in the filename.

This is also possible to do using a Data-URL, but a data-url has a 166% overhead compared to using ArrayBuffer and a blob.

这篇关于HTML定位标记下载属性不适用于jpg和png文件的Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！