Excel-Dateien mit Javascript im Frontend erstellen

Für viele Anwendungen ist der Export nach Excel ein wichtiges Feature. Zum Erstellen von Excel-Dateien mit PHP auf Serverseite gibt es Lösungen wie libxl oder PHPExcel, doch geht das auch per Javascript nur im Frontend? Ja, wie im Artikel gezeigt wird.

Warum im Frontend generieren?

Javascript-Frontends greifen heute meist auf eine Vielzahl von APIs zu, um Daten aus verschiedenen Quellen aufzubereiten und dem Benutzer im Browser anzuzeigen. Wenn mit den Daten noch Berechnungen ausgeführt werden, sind die Ergebnisse nicht mehr auf einem Server vorhanden und können so nicht mehr vom Backend in eine Excel-Datei gepackt werden.

Die Userstory „Als Analyst möchte ich die im Browser angezeigten Daten als Excel-Datei herunterladen können um meine eigenen Formeln und Berechnungen damit durchführen zu können” verlangt dann aber nach einer Lösung um Excel-Dateien per Javascript im Browser zu erzeugen und direkt an den Benutzer senden zu können.

Excelbuilder.js

Excel-Dateien bestehen prinzipiell aus mit ZIP gepackten XML-Dateien. Mit beiden Formaten können Browser gut umgehen und es ist technisch kein Problem solche Dateien zu erzeugen. Es gibt bereits einige Bibliotheken, die über eine einfache API Excel-Formate schreiben können. Als Beispiel wird hier Excelbuilder.js verwendet.

Excelbuilder.js kann Daten, Formeln und Formatierungen in eine Excel-Datei schreiben. Das reicht für die meisten Anwendungsfälle, solange man nicht wirkliche Akrobatik in Excel durchführen können muss.

Ein kleines Beispiel:

Das Download-Problem

Hat man die Datei erst einmal erstellt, so stellt sich die Frage wie man diese an den Benutzer ausliefert. Dabei wird es interessant, weil sich ja nach zu unterstützenden Browsern einige Unterschiede ergeben.

Filesaver.js

Moderne Browser implementieren die Blob-Api und können Dateien direkt per Javascript als Download schicken. Zur Vereinfachung kann man auf eine Bibliothek wie zum Beispiel Filesaver.js zurückgreifen, die eine saveAs()-Methode Cross-Browser zur Verfügung stellt.

Erweitertes Beispiel von oben:

Den Code kann man im folgenden JSFiddle ausprobieren: http://jsfiddle.net/Lson2793/

Downloadify.js

Für ältere Browser gäbe es die Möglichkeit die Daten an den Server zu schicken, dort zwischenzuspeichern und mit einem separaten Request wieder als Excel an den Browser zu liefern. Das ist umständlich und eigentlich auch irgendwie sinnfrei. Eine andere Alternative ist es, das Speichern per Flash zu realisieren. Dafür kann man auf die Bibliothek Downloadify.js zurückgreifen.

Eine Konfiguration für Downloadify kann folgendermaßen aussehen:

Fallback

Um nicht jeden Nutzer von moderner Technik mit veralteten Flash-Lösungen zu belästigen kann mach auch einen Fallback bauen, der unterstützten Browsern die Datei per Javascript schickt und alte Browser mit Flash bedient. Ob ein Browser Blobs und damit Filesaver.js unterstützt kann man mit folgendem Code prüfen:

Je nach Ergebnis kann man nun entweder einen Button für das senden per Javascript oder einen Flash-Button einblenden.

Fazit

Es ist mit einfachen Mitteln möglich Excel-Dateien per Javascript zu erzeugen und an den Benutzer zu senden. Ein Einsatz in Webprojekten mit großem Kundenkreis ist allerdings aufgrund der unterschiedlichen Browser-Implementierungen und der erwarteten Probleme nicht anzuraten. Im Intranet oder bei Seiten mit überschaubarem Nutzerkreis und bekannten, modernen Browsern ist das Vorgehen aber durchaus verwendbar und wird bei einem unserer Kundenprojekten auch eingesetzt.

Für neue Blogupdates anmelden:


6 Gedanken zu “Excel-Dateien mit Javascript im Frontend erstellen

  1. Pingback: Excel-Dateien mit Javascript im Frontend erstellen – Mayflower Blog | flobee @ php

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.