IE-Download-Datei

Lesezeit: 2 Minuten

IE Download Datei
Steve

Mit den folgenden Codezeilen kann ich eine Datei als Antwort auf einen Ajax-Aufruf in Firefox, Chrome, Opera herunterladen. Allerdings im IE die href Attribut download wird nicht unterstützt. Daher funktioniert das Folgende im IE nicht.

HTML-Code:

 <div class="fRight" style="margin-left:5px; margin-rigth:5px" >
    <input type="button" value="Request File"  id = "chReqFileBtn"  onclick = "handleClick"/>
    <a href="#" id="challengeReqFileAnchor" style="visibility: hidden"></a>
 </div>

JavaScript:

function handleClick()
{
    var code = $('#code').val();
    var quantity = $('#quantity').val();

    var req = $.ajax(
    {
        'type': 'POST',
        'url' : $apiBasePath+'config/challenge-file',
         contentType : 'application/json',
        'data': JSON.stringify({'code':code, 'quantity':quantity}),
        'success':function(response, status, xhr)
        {
            var code = xhr.getResponseHeader('Operation-Code');

            var anch = $('#challengeReqFileAnchor');
            anch.attr(
            {
                "download" : 'request.bin',
                "href" : "data:text/plain," + response       
            });
            anch.get(0).click();
        },
        'error': function(request,status,errorThrown) 
        {
           ......
        }
    });
    $pendingReqs.push(req);  
}

Welche Optionen hätte ich, um das gleiche Verhalten auch im IE zu erreichen?

  • Warum lässt man das nicht vom Server erledigen? Was ist der Zweck des Ajax-Aufrufs?

    – Prinzhorn

    4. August ’14 um 14:48

  • Manchmal ist ein Ansatz mit weniger Technologie besser – denn nicht nur der IE wird Probleme haben! Erwägen Sie, das AJAX-Ergebnis auf dem Server zu speichern (oder es einfach erst zu einer normalen HTTP-Anfrage zu machen) und den Server entsprechend einzustellen content-disposition Überschriften.

    – Niet der dunkle Absol

    4. August ’14 um 14:48

  • Aber wenn Sie diesen In-Browser unbedingt haben möchten: github.com/ChenWenBrian/FileSaver.js#examples

    – Prinzhorn

    4. August ’14 um 14:49

  • Auf der Serverseite setze ich die spezifischen Header, um den Download zu erzwingen, aber da dies Ajax ist, hat es keine Auswirkung. Ich mache es in Ajax, weil ich auch zusätzlichen Code in der Antwort ausführen muss.

    – steve

    4. August ’14 um 15:02


  • mein Downloader-Skript funktioniert in IE10+: danml.com/js/download.js Es verwendet msSaveBlob für IE10-Kompatibilität …

    – dadavis

    11. August ’14 um 2:48

IE Download Datei
Issam Zoli

Attribut herunterladen wird NICHT in IE und iOS Safari unterstützt

Bildbeschreibung hier eingeben

IE<10:

Befehl Speichern als mit execCommand kann den Trick machen, indem er den Inhalt des Elements herunterladbar macht.

Nachteile:

  • Probleme in einigen IE-Versionen unter Win7 [I don’t know if it’s fixed Here]
  • Benötigen Sie ein DOM-Element, um Daten zu enthalten

IE>=10

Verwenden von msSpeichernBlob, es ist eine Methode, die es ermöglicht, Blob oder Datei zu speichern, indem diese Header gesendet werden:

Content-Length: <blob.size>
Content-Type: <blob.type>
Content-Disposition: attachment;filename=<defaultName>
X-Download-Options: noopen

Überprüfen Lokales Speichern von Dateien mit Blob und msSaveBlob

Nachteile:

  • Brauche a um einen Blob zu definieren

Andere Browser

Wer das nicht alles selbst umsetzen möchte, für den gibt es eine schöne Bibliothek FileSaver.js um generierte Dateien auf der Client-Seite zu speichern. Es unterstützt Firefox, Chrome, Chrome für Android, IE 10+, Opera und Safari. Für IE<10 gibt es einen Fork der Bibliothek, der hinzufügt saveTextAs zum Speichern von Textdateien (.htm, .html, .txt)

Cross-Browser-Lösung

Ein serverseitiges Skript, das Dateiname, Daten und Meme-Typ empfängt und dann die Datei mit dem Header sendet Content-Disposition: attachment; filename=FILENAME

  • Danke für das Teilen des npm-Moduls – hat mir Stunden gespart 🙂

    – Matt Goo

    4. Feb. ’17 um 22:00

Ich denke, das hängt mit dem zusammen anch.get(0).click(); nicht von allen Browsern unterstützt speziell für hidden Anker, also können Sie stattdessen versuchen, Code zu folgen,

anch.get(0).show().focus().click().hide();

1642074484 975 IE Download Datei
Amjad Aziz

IE unterstützt weder das Navigieren zu einem Daten-URI noch die download Attribut. Sie können verwenden navigator.msSaveBlob um Datei für IE 10+ zu speichern.
Du kannst nachschauen window.navigator.msSaveBlobund schreiben Sie IE-spezifischen Code, andernfalls verwenden Sie den vorhandenen Code, um die Datei zu speichern.
Sie können den folgenden Link für weitere Details überprüfen:
Lokales Speichern von Dateien mit Blob und msSaveBlob

1642074484 205 IE Download Datei
sampathsris

IE unterstützt nicht download Schild.

Dort ist ein hässlich Hack können Sie jedoch verwenden.

  • Erstelle ein Unsichtbares iframe:

    <iframe id="dummy" style="display:none; visibility:hidden"></iframe>
    
  • Schreiben Sie Ihre Daten in die iframes document:

    var ifd = document.getElementById('dummy').contentDocument;
    ifd.open('text/plain', 'replace');
    ifd.write('whatever you want to be in the file');
    ifd.close();
    
  • Benutzen execCommand um die Datei zu speichern (eigentlich um den Speichern unter Dialog aufzurufen):

    ifd.execCommand('SaveAs', true, 'request.bin');
    

Beachten Sie, dass execCommand funktioniert nicht im IE11. Ich weiß, dass es fast unmöglich ist, den Browser perfekt zu erkennen. Sie können dies jedoch als Backup-Routine versuchen, wenn das Speichern von Dateien in Ihrem Code fehlschlägt.

Meine Javascript-Version zum Download-Datei von IE11 mit BOM und Zeichensatz für Excel:

$.post('/cup-frontend/requestthewholelist',
    {ipAddressList: validIpAddressListAsString},   // add custom http variables
    function (returnedData) {                      // success return
        var BOM = "uFEFF";                        // byte order mark for excel

        if (navigator.msSaveBlob) {                // ie block
            console.log("found msSaveBlob function - is't IE")
            var blobObject = new Blob([BOM + returnedData], {type: ' type: "text/csv; charset=utf-8"'});
            window.navigator.msSaveOrOpenBlob(blobObject, "cup_database.csv");
        }
        else {                                     // non-ie block
            console.log("not found msSaveBlob function - is't not IE")
            var a = window.document.createElement('a');
            a.setAttribute('href', 'data:text/plain; charset=utf-8,' + encodeURIComponent(BOM + returnedData));
            a.setAttribute('download', 'example.csv');
            a.click();
        }

    }).fail(function () {
    console.log('post error')
});

IE Download Datei
vikasrajputin

Schließlich habe ich nach stundenlanger Recherche eine Antwort gefunden, die für mich wirklich funktioniert hat. Folgender Ansatz hat für mich funktioniert.

if (navigator.msSaveBlob) { // For IE
   return navigator.msSaveBlob(blobObj, fileName);
}

In der unteren Zeile

navigator.msSaveBlob(blobObj, fileName)

Funktion msSpeichernBlob speichert die Datei auf der Festplatte. Parameter blobObj ist das Objekt, das unter einem bestimmten Namen im Parameter gespeichert werden muss Dateinamen

Für weitere Informationen besuchen Sie bitte folgenden Link:
MDN-Webdocs Mozilla

.

485760cookie-checkIE-Download-Datei

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy