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:

var data  = [
    ["Brauerei", "Output 2012 in Millionen Hektolitern", "Herkunft"],
    ["Oettinger", 5.89, "Oettingen"],
    ["Krombacher", 5.46, "Kreuztal"],
    ["Bitburger", 4.07, "Bitburg"],
    ["Beck's", 4.07, "Bremen"],
    ["Warsteiner", 2.77, "Warstein"]
];
 
require(['excel-builder'], function(ExcelBuilder) {
    var workbook = ExcelBuilder.createWorkbook();
    var worksheet = workbook.createWorksheet({name: "Top ten German beer brands"});    
    
    worksheet.setData(data);
    workbook.addWorksheet(worksheet);
 
    var filedata = ExcelBuilder.createFile(workbook);

    // TODO: send file...
  });
});

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:

require(['excel-builder', 'filesaver'], function(ExcelBuilder, saveAs) {
    var workbook = ExcelBuilder.createWorkbook();
    var worksheet = workbook.createWorksheet({name: "Top ten German beer brands"});    
    
    worksheet.setData(data);
    workbook.addWorksheet(worksheet);
 
    var filedata = ExcelBuilder.createFile(workbook, {type: "blob"});
    saveAs(filedata, "BeerBrands.xlsx");
  });
});

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:

Downloadify.create('element_id', {
 
    swf: '/path/to/downloadify.swf',
 
    downloadImage: '/path/to/button.png',
 
    width: 100,
 
    height: 30,
 
    transparent: true,
 
    dataType: 'base64',
 
    append: false,
    filename: function () {
        return "Beer Brands.xlsx";
    },
    data: function () {
        return ExcelBuilder.createFile(workbook)
    }

});

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:

var useFilesaver; // use Downloadify if false...
try {
 useFilesaver = !!new Blob();
} catch (e) {
 useFilesaver = false;
}

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.