Attribut de téléchargement de balise d'ancrage HTML ne fonctionnant pas dans Firefox pour les fichiers jpg et png

Dans mon application web, j'ai pris en charge l'utilisateur de télécharger tout type de document (.png, .jpg, .docx, .xls, ... )
je suis en train d'implémenter la fonctionnalité de téléchargement de ces documents.

Dans Google Chrome si vous cliquez sur le lien de Téléchargement de dialogue d'enregistrement s'affiche pour tous les documents mentionnés ci-dessus.

Dans Mozilla Firefox pour docx et xls fonctionne très bien, Enregistrer la boîte de dialogue est affichée mais pour .png et .jpg télécharger balise ne fonctionne pas comme prévu c'est à dire, la boîte de dialogue de téléchargement ou Enregistrer la boîte de dialogue n'apparaît pas, directement ouvrir cette image.

Mon code:

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

J'ai essayé presque toutes les solutions mentionnées sur stackoverflow et proposé par Google. Mais la plupart d'entre eux dit que " vérifier la version de firefox et d'autres changements comme:
essayez d'ajouter l'élément du DOM avant de déclencher le clic

Supprimer le nom de fichier de téléchargement tag, il est de type boolean et etc.

J'ai aussi essayé de w3schools leçon sur la balise d'ancrage et de télécharger attribut mais rien ne semble fonctionner.

Mon Mozilla Firefox version: 38.0.5

P. S.: chrome ainsi que dans firefox .docs, .xls, .les documents pdf bien fonctionner, le problème est pour .png et .jpg dans firefox.

source d'informationauteur tejas033

  1. 3

    Firefox poignée png et jpeg à l'aide de la manipulation de défaut, qui est de l'inclure dans le document. Lorsque vous cliquez sur un lien, même si le téléchargement attribut n'est pas défini, semblent faire l'Firefox pense qu'il a une nouvelle image en ignorant le téléchargement de ses aspects. C'est peut être un bug passager.

    Ici est une façon, certes pas super-élégant, de contourner ce problème en forçant l'image d'être interprétée comme un flux d'octets.

    Il ne fonctionne pas de manière intégrée sur Stackoverflow, de sorte que vous avez à tester sur jsFiddle.

    Le code est le suivant:

    • Numérise le document pour une-tags.
    • Ceux qui a data-link aura une commune cliquez sur gestionnaire d'attaché.
    • Lorsque cliqué sur le lien est extraite de la data-link attribut (href est se pour #), chargé comme un ArrayBuffer via XHR (SCRO exigences s'applique, n'est pas un problème dans ce cas), et est convertie en un Objet d'URL avec le Blob jeu de mime-type octet/stream
    • L'Objet d'URL est définie comme window.location pour rediriger vers ce binaire de données qui fera le navigateur demande à l'utilisateur de télécharger le fichier à la place.
    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();
}

    Exemple de tag:

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

    L'inconvénient est que vous perdrez de l'extension dans le nom de fichier.

    C'est aussi possible de le faire à l'aide d'un Data-URL, mais un data-url a une 166% de frais généraux par rapport à l'utilisation ArrayBuffer et un blob.

  2. -4

    Que vous utilisez HTML5 attribut, chaque navigateur manipulation différemment. Donc, utiliser https://github.com/dcneiner/Downloadify pour le côté client énergique télécharger plutôt que de les afficher dans le navigateur.