Wie bekomme ich einen Webbrowser, um eine Datei herunterzuladen, die in einer JavaScript-Zeichenfolge gespeichert ist?

Question

Ich habe in der Lage JavaScript zu schreiben, um den Browser zu veranlassen, eine Datei von einem Remote-Server wie folgt unter Verwendung von Code zum Download:

var iframe = document.createElement("iframe"); 
iframe.style.display = "none"; 
iframe.src = "filename.zip" 
document.body.appendChild(iframe); 

der großen Werke. Allerdings habe ich jetzt eine andere Situation, wo der Inhalt der Datei in einer Zeichenfolge in meinem JavaScript auf der Browserseite gespeichert wird und ich einen Download dieser Datei auslösen muss. Ich habe versucht, oben mit dieser die dritte Zeile zu ersetzen, wobei ‚myFileContents‘ ist die Zeichenfolge, die tatsächlichen Bytes der Datei enthalten:

iframe.src = "data:application/octet-stream;base64," + Base64.encode(myFileContents); 

Dies wird die Datei heruntergeladen, aber der Dateiname verloren. In Chrome ist der Dateiname nur 'Download'. Ich habe auch gelesen, dass die Dateigröße in einigen Browserversionen eingeschränkt ist.

Gibt es einen Weg, dies zu erreichen? Mit JQuery wäre OK. Die Lösung muss alle Dateitypen unterstützen - zip, pdf, csv, png, jpg, xls, etc ...

Answer 1

In some newer browsers Sie die neue HTML5 download attribute auf dem a Tag verwenden kann dies zu erreichen:

var a = document.createElement('a'); 
a.download = "filename.txt"; 
a.href = "data:application/octet-stream;base64," + Base64.encode(myFileContents); 
a.click(); 

Für eine zukünftige Lösung können Sie in die HTML5 FileSystem API suchen, aber diese API ist not currently supported in most of the major browsers. Es ist möglicherweise nicht von großem Nutzen für Sie, außer dass es Ihnen möglicherweise eine andere Möglichkeit bietet, die Dateien lokal zu speichern, wenn Sie damit einverstanden wären. Aber es speichert die Dateien nicht auf dem lokal zugänglichen Dateisystem des Benutzers, Sie müssten Ihre eigene browserbasierte Schnittstelle entwickeln, damit Ihre Benutzer mit den Dateien interagieren können. Das Herunterladen der Dateien aus dem HTML5-Dateisystem in das lokale Dateisystem des Benutzers würde in jedem Fall wiederum unter Verwendung des neuen Download-Attributs auf einem a-Tag erfolgen, das sich dann auf einen Speicherort im HTML5-Dateisystem beziehen würde, anstatt auf einen Online-Speicherort zu verweisen .

Um dies zu tun, mit einem iframe Elemente, das Sie irgendwie auf dem iframe inline; filename="filename.txt" mit Client-Seite JavaScript, um die Content-Disposition Request-Header haben würden zu setzen, ich glaube nicht, es möglich ist, dies zu tun, wegen der Sicherheitsprobleme am wahrscheinlichsten. Wenn Sie wirklich keine andere Option haben, können Sie die Downloadgeschwindigkeit abbrechen, indem Sie die Zeichenfolge mit AJAX an den Server senden und dann von dort mit den richtigen Anforderungsheadern erneut herunterladen.