web-dev-qa-db-fra.com

Attribut de téléchargement sur une balise ne fonctionnant pas IE

À partir du code suivant, je crée une balise d'ancrage dynamique qui télécharge un fichier. Ce code fonctionne bien dans Chrome mais pas dans IE. Comment puis-je obtenir ce travail

<div id="divContainer">
    <h3>Sample title</h3>
</div>
<button onclick="clicker()">Click me</button>

<script type="text/javascript">

    function clicker() {
        var anchorTag = document.createElement('a');
        anchorTag.href = "http://cdn1.dailymirror.lk/media/images/finance.jpg";
        anchorTag.download = "download";
        anchorTag.click();


        var element = document.getElementById('divContainer');
        element.appendChild(anchorTag);
    }

</script>
htmlinternet-exploreranchor
32
Nipuna

Internet Explorer ne prend actuellement pas en charge l'attribut Download sur les balises A. 

Voir http://caniuse.com/download et http://status.modern.ie/adownloadattribute ; ce dernier indique que la fonctionnalité est "à l'étude" pour IE12.

24
EricLaw

Dans mon cas, puisqu'il est nécessaire de prendre en charge l'utilisation de IE 11 (version 11.0.9600.18665), j'ai fini par utiliser la solution fournie par @Henners pour son commentaire:

// IE10+ : (has Blob, but not a[download] or URL)
if (navigator.msSaveBlob) {
    return navigator.msSaveBlob(blob, fileName);
}

C'est assez simple et pratique.

Apparemment, cette solution a été trouvée sur la fonction Javascript download créée par dandavis . 

15
aribeiro

Vieille question, mais je pensais ajouter notre solution. Voici le code que j'ai utilisé sur mon dernier projet. Ce n'est pas parfait, mais il a passé l'assurance qualité dans tous les navigateurs et dans IE9 +.

downloadCSV(data,fileName){
  var blob = new Blob([data], {type:  "text/plain;charset=utf-8;"});
  var anchor = angular.element('<a/>');

  if (window.navigator.msSaveBlob) { // IE
    window.navigator.msSaveOrOpenBlob(blob, fileName)
  } else if (navigator.userAgent.search("Firefox") !== -1) { // Firefox
    anchor.css({display: 'none'});
    angular.element(document.body).append(anchor);

    anchor.attr({
      href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
      target: '_blank',
      download: fileName
    })[0].click();

    anchor.remove();
  } else { // Chrome
    anchor.attr({
      href: URL.createObjectURL(blob),
      target: '_blank',
      download: fileName
    })[0].click();
  }
}

L'utilisation de l'API spécifique à ms a été plus efficace dans IE. Notez également que certains navigateurs exigent que l'ancre se trouve réellement dans le DOM pour que l'attribut de téléchargement fonctionne, contrairement à Chrome, par exemple. Nous avons également constaté des incohérences dans le fonctionnement des objets blobs dans divers navigateurs. Certains navigateurs ont également une limite d'exportation. Cela permet la plus grande exportation CSV possible dans chaque navigateur.

8
Kevin

À partir de la version 10547+, le navigateur Microsoft Edge prend désormais en charge l'attribut download sur les balises a. 

<a href="download/image.png" download="file_name.png">Download Image</a>

Mise à jour des fonctionnalités Edge: https://dev.windows.com/en-us/Microsoft-Edge/platform/changelog/desktop/10547/

a [download] standard: http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-download

5
MWOJO

Ce fragment de code permet d’enregistrer un blob dans le fichier dans IE, Edge et d’autres navigateurs modernes.

var request = new XMLHttpRequest();
request.onreadystatechange = function() {

    if (request.readyState === 4 && request.status === 200) {

        // Extract filename form response using regex
        var filename = "";
        var disposition = request.getResponseHeader('Content-Disposition');
        if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
        }

        if (window.navigator.msSaveOrOpenBlob) { // for IE and Edge
            window.navigator.msSaveBlob(request.response, filename);
        } else {
            // for modern browsers
            var a = document.createElement('a');
            a.href = window.URL.createObjectURL(request.response);
            a.download = filename;
            a.style.display = 'none';
            document.body.appendChild(a);
            a.click();
        }
    }

    button.disabled = false;
    dragArea.removeAttribute('spinner-visible');
    // spinner.style.display = "none";

};
request.open("POST", "download");
request.responseType = 'blob';
request.send(formData);

Pour IE et Edge, utilisez: msSaveBlob

1
Alex

Ajoutez d'abord l'enfant, puis cliquez sur

Ou vous pouvez utiliser window.location = 'url';

0
Shadow

Comme mentionné dans la réponse précédente, l'attribut de téléchargement n'est pas pris en charge dans IE. Pour contourner le problème, vous pouvez utiliser iFrames pour télécharger le fichier. Voici un exemple d'extrait de code. 

function downloadFile(url){
    var oIframe = window.document.createElement('iframe');
    var $body = jQuery(document.body);
    var $oIframe = jQuery(oIframe).attr({
        src: url,
        style: 'display:none'
    });
    $body.append($oIframe);

}
0
May13ank