(C) 2009 - 2021 by Mourad Louha · Alle Rechte vorbehalten

The Excel Button – Daten einer HTML Tabelle automatisiert in einer Excel Datei auswerten

Der offizielle Blog zu Microsoft Office hat kürzlich den „Excel Button“ vorgestellt. Wie der Like Button für Facebook, kann dieser in bestehende Websites eingebaut werden und „wandelt“ die Daten einer HTML Tabelle automatisch in eine Excel Ansicht um. Zudem können die Daten gefiltert, zwischen verschiedene Ansichtsvorlagen inklusiven von Diagrammen gewählt und als Excel Tabelle heruntergeladen werden.

In diesem Artikel werde ich einerseits die Features vom Excel Button vorstellen und andererseits dessen Einbau bzw. Verwendung in einer Website beschreiben. Abschließend werde ich ein WordPress Plug-In vorstellen, welches die Verwendung für WordPress Blogs vereinfacht und komfortabler gestaltet.

Folgende Beispieltabelle listet die Downloadzahlen von Mai bis Juli einschließlich zum Excel Soccer 2012 (unserem Excel Planer inklusive Tippspiel zur Fußballeuropameisterschaft 2012) auf. Um die Demo anzuschauen, klicken Sie hier bitte einfach auf den Excel Button „Excel Interactive View“.

[excel-interactive-view id=“excel-soccer-statistik“ style=“Standard“ filename=“Excel-Soccer“ title=“Excel Soccer Downloads 2012″ attribution=“(C) by Excel Soccer 2012″]
Jahr Version Website Downloads
2012 Basic Excel Soccer 44267
2012 Basic Computerbild 9700
2012 Basic Chip 8909
2012 Basic Softonic 2339
2012 Basic Excel Inside 843
2012 Basic The Codecage Forum 837
2012 Basic Giza Blog 506
2012 Basic Sonstige Websites 12109

Ein Klick auf die Schaltfläche lädt per JavaScript ein Fenster nach, wo die Daten in Form einer Excel Ansicht dargestellt werden.

Der Excel Button

Links befinden sich die Filter, die anhand der Überschriften der Excel Tabelle und der Werte gebildet werden. Rechts werden automatisch mehrere Ansichtsvorlagen eingeblendet, die man per Mausklick aktivieren kann.

Noch sind nicht alle Bedienelemente eingedeutscht; beim Laden verwendet die Excel Anwendung allerdings eine Browserkennung zum Ermitteln der Sprache. So wird im Google Chrome bei mir die Anwendung in Englisch geladen, während ein Aufruf über den Firefox zu einer teilweise deutschen Version führt.

Das hat allerdings Auswirkungen auf die Darstellung von Zahlen. Und zwar nimmt die Anwendung an, dass die Zahlen eine deutsche Formatierung beinhalten, wenn die Excel Anwendung in Deutsch geladen wird (Firefox) und im US-Format (Komma als Tausendertrennzeichen statt eines Punktes) vorliegen, wenn die Seite in Englisch geladen wird (Chrome). Das ist im folgenden Screenshot zu sehen, wo der Wert 9.700 in 9,7 umgewandelt wurde. Meine Empfehlung an dieser Stelle wäre, die Zahlen in der Tabelle möglichst neutral zu gestalten.

Der Excel Button

Bei meinen ersten Versuchen, den Excel Button manuell in diesen Beitrag einzubauen, hatte ich eine fehlerhafte Darstellung des Excel Buttons, der verzerrt und komprimiert angezeigt wurde. Die Ursache hierzu lag in einem der Stylesheets vom Blog-Template. Und zwar enthielt die ID #content img die Anweisung max-width:100%;, die entsprechend den Excel Button beeinflusste.

Das Filtern der Daten ist recht einfach: Die Einträge können links angeklickt werden, wobei, um mehrere Einträge in den Filter aufzunehmen, der Mausklick bei gedrückter Strg-Taste erfolgen muss. Die Ansicht wird bei jedem Klick automatisch aktualisiert. Zum Löschen des Filters kann das Symbol rechts neben der Filterkategorie (hier Website) angeklickt werden.

Der Excel Button

Möchte man die Auswertung als Excel Datei herunterladen oder direkt in der Excel Web App öffnen, ist zunächst das Symbol mit der Excel Mappe anzuklicken und anschließend der passende Menüpunkt zu wählen. Beim Download bzw. Aufrufen der Daten in der Excel Web App werden eventuell gesetzte Filter berücksichtigt. Möchte man insofern alle Daten in der Mappe sehen, empfiehlt es sich, zuvor den Filter zurückzusetzen.

Der Excel Button

Ein Standard-Dateiname wird, wenn keine eigenen Angaben zu einem vordefinierten Parameter erfolgt sind, von der Anwendung festgelegt. Bei meinen Tests wurde der Name der Downloaddatei jedoch teilweise unterschiedlich interpretiert. Im Firefox wurde das Leerzeichen im Dateinamen „Book 1.xlsx“ in den Code %20 umgewandelt, Chrome und der Internet Explorer hatten ein korrektes Leerzeichen gesetzt.

Die Mappe, geöffnet in Excel 2010, präsentiert sich wie folgt und produzierte hierbei eine Fehlermeldung. Zudem sind die Datenschnitte hier nicht vollständig.

Der Excel Button

Anders hingegen, wenn man die Mappe in der Excel 2013 Preview öffnet. Hier sind alle Elemente vorhanden sowie nutzbar. Insofern ist anzunehmen, dass der Excel Button eine Mappe generiert, die sich neuer Features und/oder interner Strukturen aus Excel 2013 bedient.

Der Excel Button

Wird, statt des Downloads, die Anzeige der Daten in der Excel Web App aufgerufen, wird diese im selben Browserfenster in der entsprechenden Sprache geöffnet und bietet entsprechende Bearbeitungsmöglichkeiten an.

Der Excel Button

Einbau des Excel Buttons in eine Website

Es stehen verschiedene Möglichkeiten zur Verfügung, den Excel Button in eine Webseite einzubinden. Neben der manuellen Anbindung durch direkte Eingabe des HTML Codes steht ein Code Generator auf der englischen Website „Excel Mashup“ mit einfachen Konfigurationsmöglichkeiten zur Verfügung. Für WordPress Blogs kann ein Plug-In installiert werden, welches per Shortcode das Anlegen des Excel Buttons vereinfacht.

Zunächst bedarf es aber einer HTML Tabelle, die sich nach aktuell gültigen Webstandards richten sollte, da es sonst zu Fehlern beim Parsen der Tabelle durch den Excel Button kommen kann und dieser nicht angezeigt wird. Wichtig ist an dieser Stelle auch, dass die Tabelle korrekt ausgezeichnete Bereich für die Überschriften (Tags thead, tr und th) und den Inhalt (Tags tbody, tr und td) beinhaltet. Zellenverbünde sollten vermieden werden. Beispielsweise wurden Tabellenzeilen, die sich über mehrere Spalten erstreckten, von der Excel Anwendung zum Excel Button in meinen Tests ignoriert.

Der Excel Button, wenn dieser ohne Angabe von zusätzlichen Parametern angelegt wird, sucht die erste Tabelle, die dem Code zum Excel Button folgt. Das heißt, dass für den Standardfall, der Code zum Excel Button vor dem Code zur Tabelle gelegt werden muss. Es ist auch möglich, auf die Weise mehrere Tabellen mit jeweils einem Excel Button zu erstellen.

Im Wesentlichen beinhaltet das Einbinden des Excel Buttons zwei Schritte. Zunächst ist der HTML Code für den Button selbst einzubinden. Dieser besteht aus einem Link, der in die Zeile vor dem Code der Tabelle platziert wird.

<a href=“#“ name=“MicrosoftExcelButton“ data-xl-buttonStyle=“Standard“></a>

Damit jedoch ein Klick auf den Excel Button die Anwendung aufrufen kann, muss noch eine JavaScript Datei vom Microsoft Server angebunden werden. Fügen Sie folgende Zeile vor dem </body> Tag der Website ein.

<script type=“text/javascript“ src=“http://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1″></script>

Optional könnte die JavaScript Datei generell im Kopfbereich einer eventuell vorhandenen Webseitenvorlage eingebunden werden. In einem solchen Fall wäre dann nur noch der Code für den Excel Button einzubinden.

Viele Blogger und Website-Editoren nutzen in der Regel eine Layout Ansicht zum Editieren der Beiträge. Hier ist, vor der Einbindung des Codes, darauf zu achten, dass in die HTML Ansicht umgeschaltet wird. Damit der Code nicht in Text umgewandelt wird und keine Wirkung zeigt. Hier empfehle ich die entsprechende Dokumentation des Blogs und/oder CMS zu konsultieren.

Manche Installationen von Blogs lassen auch beispielsweise nicht zu, dass ein externes JavaScript geladen wird. Auch hier ist einerseits die Dokumentation zum verwendeten System zu Rate zu ziehen oder gegebenenfalls ein Administrator zu fragen.

Der Excel Button ermöglicht zudem die Angabe von vordefinierten Parametern, um beispielsweise eine Überschrift zur Excel Tabelle zu generieren oder den Dateinamen festzulegen. Die Parameter selbst sind bei MSDN dokumentiert, die ich folgend in Deutsch übersetzt habe:

  • „data-xl-dataTableID“ ermöglicht die Angabe einer Tabellen-ID, womit dann der Button auch an anderer Stelle als über der Tabelle platziert werden kann.
  • „data-xl-buttonStyle“ ermöglicht eine Auswahl für die Anzeige des Excel Buttons. Momentan stehen die zwei Stile „Standard“ und „Small“ zur Verfügung.
  • „data-xl-fileName“ ermöglicht die Angabe eines Dateinamens für die Excel Tabelle, wenn diese heruntergeladen wird.
  • „data-xl-tableTitle“ ermöglicht die Angabe eine Überschrift für die Tabelle. Der Parameter lässt maximal 255 Zeichen zu.
  • „data-xl-attribution“ ermöglicht einen Hinweis zum Autor bzw. Ersteller in die Tabelle einzufügen, zum Beispiel „© Excel Ticker 2012“. Auch sind maximal 255 Zeichen vorgesehen.

Somit sieht der Code, den ich für meine Tabelle zu den Excel Soccer Downloads verwendet habe, wie folgt aus:

<a href=“#“ name=“MicrosoftExcelButton“ data-xl-dataTableID=“excel-soccer-statistik“ data-xl-buttonStyle=“Standard“ data-xl-fileName=“Excel-Soccer“ data-xl-tableTitle=“Excel Soccer Downloads 2012″ data-xl-attribution=“(C) by Excel Soccer 2012″></a>

Der Code Generator auf der englischen Website „Excel Mashup“ ermöglicht die Angabe einiger dieser Parameter; und zwar die Angabe des Stils, der Überschrift und des Hinweises zum Autor.

Der Excel Button

Ein Klick auf „Generate Code“ erzeugt die beiden Bestandteile für den Excel Button und lassen dann das Kopieren und Einfügen zu.

Der Excel Button

Excel Button Plug-In für WordPress Blogs

Für WordPress Blogs steht das Plug-In Excel Interactive View zur Verfügung, welches sich zwar noch in der Beta-Phase befindet, in meiner WordPress einwandfrei funktioniert. Die Installation verläuft über den entsprechenden Administrationsbereich für Plug-Ins schnell und problemlos.

Anschließend steht ein neuer sogenannter „Shortcode“ zur Verfügung, der z.B. in die HTML Ansicht eingefügt werden kann. Vor der Tabelle braucht dann nur noch [excel-interactive-view] eingefügt werden.

Der Excel Button

Der Entwickler des Plug-Ins hat aber auch die Parameterangaben für den Code zum Excel Button im Auge gehabt und bietet die Möglichkeit entsprechende Angaben dem Shortcode hinzuzufügen. So lautet zu meiner Beispieltabelle der vollständige Shortcode:

[excel-interactive-view id=“excel-soccer-statistik“ style=“Standard“ filename=“Excel-Soccer“ title=“Excel Soccer Downloads 2012″ attribution=“(C) by Excel Soccer 2012″]

Die Parameternamen im Shortcode unterscheiden sich hier von denen im Excel Button Code, haben aber letzten Endes dieselbe Bedeutung. Folgend die Parameternamen im Shortcode und deren Entsprechung im Excel Button Code:

  • „id“ entspricht „data-xl-dataTableID“ für die ID der Tabelle.
  • „style“ entspricht „data-xl-buttonStyle“ für die Stilangabe.
  • „filename“ entspricht „data-xl-fileName“ für den Dateinamen.
  • „title“ entspricht „data-xl-tableTitle“ für die Überschrift.
  • „attribution“ entspricht „data-xl-attribution“ für den Hinweis zum Autor.

Fazit

Die Idee ist cool, mehr davon! Bis auf sicherlich ein paar kleinere Kinderkrankheiten ließ sich der Excel Button problemlos einbinden und die Anbindung funktioniert gut.

Wünschenswert wäre aus meiner Sicht allerdings ein zusätzlicher Parameter zur Angabe der Sprachversion, denn es kann nicht davon ausgegangen werden, dass jeder Nutzer seinen Browser in der Muttersprache verwendet. Diesen Wunsch hätte ich übrigens auch für die Excel Web App, wo ähnliche Probleme in Kombination mit den Sprachversionen auftreten.

Ich könnte mir zudem vorstellen, dass der Excel Button auch durchaus in Foren sinnvoll verwendet werden könnte. Zwar beinhalten in der Regel Foren viele HTML-Tabellen, womit sich einige technische Probleme bei der Implementierung ergeben dürften, aber dennoch werde ich den Versuch starten, den Excel Button auch den Usern im Office 2013 Forum zur Verfügung zu stellen. Vielleicht in Kombination mit einem Excel Add-In, welches wiederum Excel Tabellen entsprechend aufbereitet.

Abschließend einige Links zu Beiträgen über den Excel Button, Literatur und dem WordPress Plug-In.

 
Comments

No comments yet.