[JS] [jQuery] [Ajax] [JavaEE] CSV-Datei auf Server erzeugen und zum download anbieten

[KennyZorro]

Hallo Zusammen,

mein erster Post hier - also seid bitte nicht zu streng.

Ich habe die Suchfunktion vorher genutzt und bin auf kein problemlösendes Ergebnis gestoßen.

Derzeitiges Szenario:

Es geht um eine Java Web Anwendung zur Verwaltung von Nachrichten. Auf der Eingangsmaske oder einer Suchmaske wird eine Liste mit allen Nachrichten angezeigt. Über einen link wird auf dem Server eine Methode zum erstellen eines CSV-Strings aufgerufen und im Header des response als CSV-Datei gesetzt. Die Daten für den CSV-String befinden sich in einer Liste auf dem Server. Eine Erstellung der CSV-Datei alleinig vom Client durch JavaScript ist nicht möglich.

Problem:

Gelegentlich kommt es vor, dass sich im Eingang eine große Anzahl von Nachrichten befindet, dem entsprechend dauert die Generierung der Datei länger. (10.000 Narichten ca. 17 Sekunden)

Wunsch Szenario:

Beim Klick auf den Link wird eine Anfrage per Ajax an den Server gestellt. Zeitgleich wird ein Overlay mit einer Animation und "Datei wird erstellt..." angezeigt. Sobald der Server fertig ist wird die Datei per Ajax wieder an den Client geschickt, das Overlay ausgeblendet und die Datei zum Download angeboten (Nicht über einen extra Link sondern als "Speichern Unter.."-Dialog).

Leider habe ich noch nie mit Ajax gearbeitet und weiß auch nicht, ob meine Vorstellung hier umsetzbar ist. Wir haben in allen Seiten jQuery eingebunden.

Ich hoffe ihr könnt mir den richtigen Denkanstoß geben und vielen Dank im voraus.

Mfg Kenny

[uenetz]

Frage!

Muss es denn eine CSV-Datei sein, oder wäre der Einsatz einer Datenbank da nicht sinnvoller?

Den Inhalt einer Tabelle lässt sich bei Bedarf auch zu jeder Zeit auslesen und im CSV-Format ausgeben (ohne dass man dies in eine Datei schreiben muss).

Bearbeitet 14. November 2012 von uenetz

[KennyZorro]

Hallo,

tut mir Leid, dass hätte ich erwähnen müssen.

Die Anwender möchten ihren Posteingang (ggf Suchergebnis) als Excel-Datei zur Verfügung stehen haben.

In wie fern das Sinnvoll ist, lässt sich streiten.. aber so ist es gefordert.

[uenetz]

Da Du die Aufgaben, so wie ich es gelesen haben im Java löst, verstehe ich nicht so recht, was Du dann noch mit Ajax willst.

Einfache Schritte wären:

1. Http-Request zum Erstellen der CSV-Datei auf dem Server.

2. Http-Request zum Lesen der Daten vom Server.

3. Die Daten dann in eine ArrayList packen und dann auf dem lokalen System speichern.

Oder habe ich etwas falsch verstanden?

[flashpixx]

Die Anwender möchten ihren Posteingang (ggf Suchergebnis) als Excel-Datei zur Verfügung stehen haben.

In wie fern das Sinnvoll ist, lässt sich streiten.. aber so ist es gefordert.

Was hat das mit der Problemstellung zu tun !?

Du willst eine CSV Datei vom Server laden bzw. diese via jQuery editieren. Wie schon der Vorposter schrieb nutze eine Datenbank in der die Daten gehalten werden, verändere die Struktur der Daten via jQuery und SQL und liefere sie eben als CSV oder was auch immer Du willst an den Client zurück

[uenetz]

Was hat das mit der Problemstellung zu tun !?

verändere die Struktur der Daten via jQuery und SQL und liefere sie eben als CSV oder was auch immer Du willst an den Client zurück

auch bei dieser Vorgehensweise braucht er kein Ajax / jQuery

[KennyZorro]

Schnipp:

...


// Response erstellen und mit CSV-Download füllen

			resp.reset();


			resp.setHeader("Content-disposition", "inline; filename=eingang.csv");

			resp.setContentLength(csvContent.length());

			resp.setCharacterEncoding("iso-8859-1");

			resp.setContentType("text/csv");


			BufferedWriter writer = new BufferedWriter(new OutputStreamWriter(resp.getOutputStream(), "iso-8859-1"));


			writer.write(csvContent.toString());

			writer.flush();

			writer.close();

Das ist ein Auszug aus dem Servlet welches sich um die Verarbeitung des Requests kümmert.

Vor dem Schnipp wird der csvContent (StringBuilder) zusammengebaut und mit den Daten gefüllt - darin befindet sich der komplette Inhalt der CSV-Datei. Diese Lösung funktioniert - sofern kein Overlay angezeigt wird. Ein Overlay würde ja gewöhnlich beim Seitenwechsel automatisch ausgeblendet werden, hier findet aber kein Seitenwechsel statt. Der Client schickt zwar ein Request zum Server, erhält aber als Antwort die CSV-Datei.

Wie schaffe ich es das Overlay auszublenden, wenn die Datei vom Server kommt? Mir fällt in diesem Fall nur Ajax als Lösung ein, damit kenne ich mich aber noch nicht aus und bräuchte - sofern Ihr keine andere Idee habt - einen Denkanstoß.

[uenetz]

Was läuft auf der Client-Seite?

Ein Applet oder eine ?HTML - Dokument?

[KennyZorro]

Der Benutzer bekommt nur ein HTML-Dokument (jsp).

[uenetz]

Schalte das Datenelement / Overlay doch einfach auf "visible=none" und fertig.

Beispiel: document.getElementById('myoverlay').style.visible=none;

[KennyZorro]

Das wäre genau der Teil den ich in das Ende von dem Ajax-Call packen würde.

Also ich weiß nicht, wie ich einer bereits geladenen Seite klar machen soll, dass ein weiterer request Grade vom Server bearbeitet wurde und eine Datei zurück geliefert hat.

Wie soll die Seite auf der der link zum erzeugen ist mitkriegen, dass die Datei zum Download bereit steht?

[uenetz]

Beispiel:

$.ajax({

url:'http://www.example.com/csv/daten.csv', type:'HEAD',

error: function()

{

// Datei existiert nicht

},

success: function()

{

//Datei zum Download bereit

}

});

[KennyZorro]

Also doch mit Ajax

Aber ganz so klappt es nicht nicht - es gibt keine CSV-Datei die auf dem Server liegt. Die Datei wird immer nur Temporär generiert und direkt in das Response geschrieben.

Der link schaut so aus: programm/servlet?do=export

Das Servlet läd sich die Daten aus dem Manager und baut mithilfe von Json einen CSV-String. Der String wird dann, wie oben in dem Schnipp zu sehen, einfach in das response geschrieben und der header umgeschrieben.

Wie muss der Aufruf aussehen und was muss ich am Servlet ändern? Auf dem Server können keine Dateien erstellt werden.

[uenetz]

Dieser Link sollte Dir ein Stück weiter helfen.

Wenn das Servlet die Daten sauber liefert, muss auch daran nichts geändert werden.

Aber wie zuvor schon erwähnt, man kann sich die Arbeit auch erleichtern wenn man mit einer Datenbank hantiert

Ich denke mit den Informationen die hinter dem Link stehen, solltest Du Dein Vorhaben realisieren können.

[KennyZorro]

Ich verstehe nicht was eine Datenbank damit zu tun hat?

Die Daten kommen aus einer Datenbank - sie werden bei der Suchabfrage gelesen, in einem Manager gehalten und auf der JSP-Seite ausgegeben. Das Servlet holt die Daten nur wieder aus dem Manager und verarbeitet diese zu einem CSV-String.

[hbspike]

Du könntest auch die Datei als Base64 String direkt in das Download-Element einbinden.

Zumindest mache ich das zur Zeit so.

Base64 De-/encoder gib es ja zu hauf für js. Was ich mache ist, ich lese die Datei als DataURL:

var oFReader = new FileReader();

// damit z.B. nach dem fertigen einlesen der Datei, der Content in ein Seiten-Element geschrieben wird.

oFReader.onloadend = function(evt) {

					var decodedData = oFReader.result;

					encodedFile = BvCrypto.encodeD(decodedData,password);

					resultElement.textContent=encodedFile;

			    };

 oFReader.readAsDataURL(oFile);

Dann musst du nur einfach den resultierenden Base64-String in z.B. ein href element eines <a> tags schreiben und puff kannste beim klicken

auf den Link, die Datei herunterladen!

Edit:

Ich habe gerade gelesen das die Daten als Tabelle visualisiert werden. dann gibt es auch noch eine andere Möglichkeit.

Guckst du hier. Mit diesem Script kannst du per Button eine HTML-Table direkt als Excel-datei exportieren. (ok kein csv, aber der unterschied ist ja nicht so groß)

Bearbeitet 16. November 2012 von hbspike

[KennyZorro]

Hallo,

dass verstehe ich leider nicht ganz.

Die Datei kann nicht alleinig von JS erstellt werden weil Daten vom Server geladen werden müssen. (Ajax ausgenommen)

Dazu soll die Datei nur erstellt werden, wenn sie auch angefordert wurde.. Wir reden hier immerhin von 10.000 Zeilen mit knapp 20 Datenfeldern.. Das generieren dauert ein wenig..

[hbspike]

Korrekt, dein Server generiert die Datei.

Und der Server liest sie als DataURL ein(Sollte machbar sein).

Das ist dann ein String der diese Datei representiert(wenn ich mich nicht ganz irre). Den könntest du dann an deine Site senden und als Download-Link zur Verfügung stellen.

[KennyZorro]

Hallo,

dass geht leider nicht. Nach dem Klick auf den Export soll sofort der speichern unter Dialog kommen. Ein weiterer Klick auf einen Button o.Ä darf nicht sein.

[hbspike]

Naja. Das könntest du ja mit einem versteckten element realisieren was ein onChange event hat

Möglichkeiten gibt es da viele.

Ich kann es leider nur aus der nich AJAX Welt sehen, da ich mich damit nicht auskenne ...

Sorry

[hbspike]

Auch nochmal zum Thema, die Daten kommen vom Server,

Benutzt du JSF? Da kannst du dann quasi per #{klassenname.parameter} (parameter braucht getter und setter und könnte z.B. sowas sein wie die Daten) und dann bekommst du als Ergebnis anstelle von #{klassenname.parameter} das Object/String etc...

[uenetz]

Möglichkeiten gibt es da viele.

Richtig!

Man sollte sich für eine entscheiden und diese dann realisieren.

Beispiel SaveAs - Button:

function SaveContents(element) {

    if (typeof element == "string")

        element = document.getElementById(element);

    if (element) {

        if (document.execCommand) {

            var oWin = window.open("about:blank", "_blank");

            oWin.document.write(element.value);

            oWin.document.close();

            var success = oWin.document.execCommand('SaveAs', true, element.id)

            oWin.close();

            if (!success)

                alert("Sorry, your browser does not support this feature");

        }

    }

}

Elemente im Formular:

<textarea id="myText"></textarea><br />

<button type="button" onclick="SaveContents('myText');">Save</button>

In myText dann die Daten vom Server schreiben (innerHTML). Das Ganze lässt sich auch in der o.g. Funktion realisieren. Also FetchData + SaveAs. Wie man sehen kann, geht es auch ohne Ajax *zwinker

function getHttpRequest() {


    var xmlhttp = null;

    // Mozilla

    if (window.XMLHttpRequest) {

        xmlhttp = new XMLHttpRequest();

    }

    // IE

    else if (window.ActiveXObject) {

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }


    xmlhttp.open("GET", 'httprequest.php', true);

    xmlhttp.onreadystatechange = function() {

        if(xmlhttp.readyState != 4) {

            $('ergebnis').innerHTML = 'Seite wird geladen ...';

        }

        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            $('ergebnis').innerHTML = xmlhttp.responseText;

        }

    }

    xmlhttp.send(null);

}

Ich denke, damit solltest Du nun Deine Aufgabe eigenständig bewältigen können.

Bearbeitet 16. November 2012 von uenetz