In Datei schreiben, ohne Server

[JürgenB]

Hallo,

zuerst mal ein frohes neues Jahr.

Ich lese über die File-API Daten von der Festplatte des Clients, verarbeite sie und möchte dann das Ergebnis im xml-Format clientseitig abspeichern. Das Ganze soll ohne Server laufen, rein clientseitig. Da die FileAPI vorausgesetzt wird, werden nur neue Browser unterstützt,

Zum Speichern habe ich bisher folgende Methoden gefunden,die xml-Daten sind in gpx:

window.open('data:text/xml;charset=utf-8,' + encodeURIComponent( gpx ),"GPX" );  
window.open('data:text/plain;charset=utf-8,' + gpx ,"GPX" );

öffnet neues Browserfenster, speichern über "Speichern unter". FF OK, IE kann Inhalt nicht anzeigen, Chrome stürzt ab, wenn gpx größer als ca. 1.8MB ist.

var fenster = window.open("about:blank","GPX3");  
fenster.document.write(gpx.replace(/</g,"&lt;"));

zeigt Inhalt, aber speichert beim "Speichern unter" das html-Dokument, nicht aber die xml-Datei, bzw. sperrt den Speicherdialog. Hier könnte man mit Copy & Paste weitermachen :(

window.prompt("Kopieren (Strg+C) und im Editor einfügen (Srg+V)", gpx);

im FF OK, im Chrome wird nicht alles angezeigt, im IE bleibt der String leer, wenn GPX zu groß.

location.href = 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent( gpx );

im FF OK, Chrome stürzt ab, wenn gpx größer als ca. 1.8MB ist, IE macht nichts.

Jetzt bin ich mit meinem Latein am Ende. Kennt von Euch jemand einen Weg, Daten Clientseitig zu speichern?

Gruß, Jürgen

[molily]

Hallo,

in Firefox und Chrome sollte folgendes funktionieren:

<a href="data:application/xml;charset=utf-8,…" download="foo.gpx">…</a>

Hab's aber nicht ausprobiert.

Mathias

[JürgenB]

Hallo Mathias,

in Firefox und Chrome sollte folgendes funktionieren:

<a href="data:application/xml;charset=utf-8,…" download="foo.gpx">…</a>

danke für den Tipp.

Hab's aber nicht ausprobiert.

im FF geht es, der Chrome stürzt bei zu großer Datenmenge ab und der IE macht nichts; also wie location.href=...

Gruß, Jürgen

[molily]

der Chrome stürzt bei zu großer Datenmenge ab

Das ist wohl dieser Bug:

https://code.google.com/p/chromium/issues/detail?id=44820

Da weiß ich auch keinen Ausweg. Da ist wohl ein Online-Service nötig.

Oder hilft im Falle von Chrome die Filesystem-API weiter? Kann man auf derartig gespeicherte Dateien irgendwie verlinken ohne riesige data-URIs? Das wäre natürlich sehr umständlich und nicht wenig benutzerfreundlich.

Grüße
Mathias

[JürgenB]

Hallo Mathias,

der Chrome stürzt bei zu großer Datenmenge ab

Das ist wohl dieser Bug:

https://code.google.com/p/chromium/issues/detail?id=44820

da kann man ja cf Besserung hoffen.

Da weiß ich auch keinen Ausweg. Da ist wohl ein Online-Service nötig.

Ich werde wohl Browserabhängig entscheiden, ob direkt gespeichert wird (FF, Chrome bei Datenmenge < 2MB) oder indirekt über Popup und dann Copy & Paste -> Editor.

Oder hilft im Falle von Chrome die Filesystem-API weiter? Kann man auf derartig gespeicherte Dateien irgendwie verlinken ohne riesige data-URIs? Das wäre natürlich sehr umständlich und nicht wenig benutzerfreundlich.

damit kann man aber nur in einer "Sandbox" schreiben, also aus meiner Sicht für Browser-Apps nicht brauchbar.

Gruß, Jürgen

[JürgenB]

Hallo,

der Chrome stürzt bei zu großer Datenmenge ab

und leider scheint er sowohl bei "window.prompt(" als auch bei "window.open(" die mittleren Daten zu unterdrücken und durch "..." zu ersetzen.

Vielleicht hat ja noch jemand eine Idee, wie man Daten speichern kann.

Gruß, Jürgen

[JürgenB]

Hallo,

ich habe mal eine Testseite gebastelt:

Write to disk

ich kann nur unter Windows 7 im IE11, FF26 und Chrome31 testen. Könnte das mal jemand unter Linux oder MacOS in den dort gängigen Browsern testen?

Achtung, im FF dauert das Speichern sehr lange.

Danke und Gruß
Jürgen

[JürgenB]

Hallo,

und noch das Thema geändert

Gruß, Jürgen

[M.]

Mahlzeit,

zumindest im Chrome 27 unter Linux funktionierts.

[JürgenB]

Hallo M.,

vielen Dank.

Gruß, Jürgen

[molily]

Funktioniert in Chrome 31, Firefox 26, Opera 18, Opera 12 jeweils auf MacOS.

Es funktioniert auch prinzipiell auf Safari, aber der zeigt die data-URL direkt im Browserfenster an, anstatt einen Download-Dialog zu öffnen. :( Ich sehe also den base64-kodierten Kladderadatsch.

Mathias

[JürgenB]

Hallo molily,

Es funktioniert auch prinzipiell auf Safari, aber der zeigt die data-URL direkt im Browserfenster an, anstatt einen Download-Dialog zu öffnen. :( Ich sehe also den base64-kodierten Kladderadatsch.

kann man die Daten denn speichern, oder mit C & P in einen Editor kopieren?

Ich habe jetzt mal

location.href = ...

durch

linkelement.href = ...
linkelement.click();

ersetzt. Zeigt das eine Änderung?

Gruß, Jürgen

[molily]

Hallo!

kann man die Daten denn speichern, oder mit C & P in einen Editor kopieren?

Ja, klar, das geht.

Als du application/octet-stream verwendet hast, ging es sogar besser als bei application/xml. Nun steht dort noch »This XML file does not appear to have any style information associated with it. The document tree is shown below.« vor dem Dateiinhalt.

linkelement.href = ...
linkelement.click();

Zeigt das eine Änderung?

Es bleibt dasselbe. Ich sehe die Daten als Vollbild.

Safari 7.01 (Mavericks) unterstützt das download-Attribut noch nicht, insofern ist es logisch, dass er dasselbe Verhalten wie bei location.href = … zeigt.

Mathias

[JürgenB]

Hallo Mathias,

vielen Dank.

Gruß, Jürgen

[JürgenB]

Hallo,

vielen Dank. Das Speicherproblem ist gelöst, wenn auch noch nicht zufriedenstellend: Chrome kann nur kleine Dateien und IE und Safari können nicht direkt speichern. Als Alternative wird der Umweg über ein neues Fenster und dann Copy & Paste genommen.

Da mein Testbereich nicht von Dauer ist, hier noch mal fürs Archiv die aktuelle Version:

  
#save_data { display:none }  

  
<a id="save_data" download="Test.xml">und speichern</a>  

  
var write_file = function(data) {  
  var save_data = document.getElementById("save_data");  
  var UA = navigator.userAgent.toLowerCase();  
  var encoded_data = encodeURIComponent( data );  
  if(UA.indexOf("trident")>-1) {  
    var fenster = window.open("about:blank","Daten");  
    fenster.document.write(data.replace(/</g,"&lt;"));  
  }  
  else if(UA.indexOf("chrome")>-1 && encoded_data.length>=2000000 ) {  
    alert('Die Datenmenge ist zu groß!');  
  }  
  else {  
    save_data.href = "data:application/xml;charset=utf-8," + encoded_data;  
    save_data.click();  
  }	  
}  

Gruß, Jürgen