Herunterladen einer dynamischen CSV-Datei in Internet Explorer

Question

Der folgende Code funktioniert sowohl in FireFox als auch in Chrome, nicht jedoch in IE. Im Wesentlichen habe ich ein JSON-Objekt, das in ein Array und dann in ein CSV-Format konvertiert wird, wenn ich auf die Schaltfläche in FF oder Chrome die Datei heruntergeladen wird oder das Speichern unter Fenster öffnet, aber in IE öffnet sich eine neue Registerkarte . In einer perfekten Welt würde der IE nicht existieren, aber in der realen Welt müssen wir es zum Laufen bringen, lol.

Übrigens verwende ich IE 11 in Windows 8, um dies zu testen, wenn das einen Unterschied macht.

Vielen Dank!

Answer 1

Dies ist meine Lösung, falls jemand anderes für eine Lösung sucht. Jetzt funktioniert es mit FF, Chrome und IE

var csv = JSON2CSV(json_obj);    
var blob = new Blob([csv],{type: "text/csv;charset=utf-8;"}); 

if (navigator.msSaveBlob) { // IE 10+ 
navigator.msSaveBlob(blob, "csvname.csv") 
    } else { 
     var link = document.createElement("a"); 
     if (link.download !== undefined) { // feature detection 
      // Browsers that support HTML5 download attribute 
      var url = URL.createObjectURL(blob); 
      link.setAttribute("href", url); 
      link.setAttribute("download", "csvname.csv"); 
      link.style = "visibility:hidden"; 
      document.body.appendChild(link); 
      link.click(); 
      document.body.removeChild(link); 
     }   
    } 

Jetzt muss ich nur, um herauszufinden, ob es einen Weg gibt, die als Bildschirm speichern zu haben, anstatt automatisch Speichern der Datei auftauchen. Wenn jemand die Antwort weiß, bitte teilen. Für jetzt müssen meine Benutzer diese Funktionalität verwenden.

Vielen Dank für all die tollen Antworten, ihr seid super.

Answer 2

Internet Explorer lässt Daten-URIs aus Sicherheitsgründen nicht als navigierbaren Inhalt zu. Um zu verstehen, warum, möchte ich Sie ermutigen, Henning Klevjers kurzes Whitepaper zum Thema Phishing by data URI zu lesen. Zusammenfassend hat sich gezeigt, dass dies Möglichkeiten aufzeigt, mit denen der Endnutzer dazu gebracht werden könnte, sensible Informationen aufzugeben.

Auch aus der data Protocol documentation on MSDN:

Aus Sicherheitsgründen Daten URIs werden in der Download-Ressourcen beschränkt. Daten-URIs können nicht zur Navigation, zum Skripten oder zum Auffüllen von Rahmen- oder Iframe-Elementen verwendet werden.

Um ehrlich zu sein, fühlt sich ein Daten-URI window.open ein bisschen hacky. Stattdessen sollten Sie eine API verwenden, um den Prozess zu verarbeiten (sofern vorhanden). Wenn Sie eine Datei auf den Computer des Benutzers in Internet Explorer herunterladen möchten, sollten Sie die Verwendung von navigator.msSaveBlob oder navigator.msSaveOrOpenBlob in Betracht ziehen.

Als Beispiel betrachten wir die folgenden:

if (window.navigator.msSaveOrOpenBlob && window.Blob) { 
    var blob = new Blob([ "A,B\nC,D" ], { type: "text/csv" }); 
    navigator.msSaveOrOpenBlob(blob, "strings.csv"); 
}