web-dev-qa-db-de.com

Attribut herunterladen bei Ein Tag, das nicht funktioniert IE

Aus dem folgenden Code erstelle ich ein dynamisches Ankertag, das eine Datei herunterlädt. Dieser Code funktioniert gut in Chrome, aber nicht im IE. Wie kann ich das zum Laufen bringen?

<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>
32
Nipuna

Das Download-Attribut für A-Tags wird von Internet Explorer derzeit nicht unterstützt. 

Siehe http://caniuse.com/download und http://status.modern.ie/adownloadattribute ; Letzteres zeigt an, dass das Feature für IE12 "In Betracht" steht.

24
EricLaw

Da in meinem Fall die Verwendung von IE 11 (Version 11.0.9600.18665) unterstützt werden muss, habe ich die Lösung von @Henners zu seinem Kommentar verwendet:

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

Es ist ganz einfach und praktisch.

Anscheinend wurde diese Lösung in der von dandavis erstellten Javascript download - Funktion gefunden. 

15
aribeiro

Alte Frage, aber ich dachte, ich würde unsere Lösung hinzufügen. Hier ist der Code, den ich für mein letztes Projekt verwendet habe. Es ist nicht perfekt, aber es hat QA in allen Browsern und IE9 + bestanden.

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

Die Verwendung der ms-spezifischen API hat am besten für uns im IE funktioniert. Beachten Sie auch, dass einige Browser erfordern, dass der Anker tatsächlich im DOM ist, damit das Download-Attribut funktioniert, während Chrome dies nicht tut. Außerdem haben wir einige Unstimmigkeiten bezüglich der Funktionsweise von Blobs in verschiedenen Browsern festgestellt. Einige Browser haben auch ein Exportlimit. Dies ermöglicht den größtmöglichen CSV-Export in jedem Browser afaik.

8
Kevin

Ab Build 10547+ unterstützt der Microsoft Edge-Browser jetzt das download-Attribut für a-Tags. 

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

Aktualisierung der Edge-Funktionen: 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

Benutze meine Funktion

Es bindet Ihr atag, um Datei im IE herunterzuladen

function MS_bindDownload(el) {
    if(el === undefined){
        throw Error('I need element parameter.');
    }
    if(el.href === ''){
        throw Error('The element has no href value.');
    }
    var filename = el.getAttribute('download');
    if (filename === null || filename === ''){
        var tmp = el.href.split('/');
        filename = tmp[tmp.length-1];
    }
    el.addEventListener('click', function (evt) {
        evt.preventDefault();
        var xhr = new XMLHttpRequest();
        xhr.onloadstart = function () {
            xhr.responseType = 'blob';
        };
        xhr.onload = function () {
            navigator.msSaveOrOpenBlob(xhr.response, filename);
        };
        xhr.open("GET", el.href, true);
        xhr.send();
    })
}
1
EunSeong Lee

Dieses Codefragment ermöglicht das Speichern von Blob in der Datei in IE, Edge und anderen modernen Browsern.

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

Für IE und Edge verwenden Sie: msSaveBlob

1
Alex

Kind zuerst anhängen und dann klicken

Oder Sie können window.location = 'url' verwenden.

0
Shadow

Wie in der vorherigen Antwort erwähnt, wird das Download-Attribut in IE nicht unterstützt. Um dieses Problem zu umgehen, können Sie die Datei mithilfe von iFrames herunterladen. Hier ist ein Beispielcode-Ausschnitt. 

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

Ich habe den Code von hier kopiert und für ES6 und ESLint aktualisiert und meinem Projekt hinzugefügt.

Sie können den Code in download.js Speichern und in Ihrem Projekt folgendermaßen verwenden:

import Download from './download'
Download('/somefile.png', 'somefile.png')

Beachten Sie, dass es dataURLs (von Zeichenbereichsobjekten) und mehr unterstützt. Weitere Informationen finden Sie unter https://github.com/rndme .

0
Simon Hutchison