Wie exportiert man eine HTML-Tabelle mit jQuery nach Excel

Wenn Sie jemals eine Webanwendung erstellt haben, die Daten als Tabelle anzeigt, müssen Sie diese Tabelle wahrscheinlich in einem Format exportieren, das in Microsoft Excel leicht geöffnet und bearbeitet werden kann. Die gute Nachricht ist, dass dies mit der jQuery-Bibliothek ziemlich einfach gemacht werden kann.

Der Prozess, eine HTML-Tabelle mit jQuery nach Excel zu exportieren, beinhaltet das Konvertieren von HTML-Code in ein Format, das Excel versteht. Natürlich können Sie all diese Logik selbst schreiben, aber es wird viel Zeit und Mühe in Anspruch nehmen. Stattdessen können Sie vorgefertigte Lösungen wie das jQuery-Plugin "table2excel" nutzen.

Mit dem "table2excel" -Plugin können Sie eine HTML-Tabelle mit einem einfachen Methodenaufruf nach Excel exportieren. Es bietet eine große Anzahl von Optionen zum Anpassen des Exports, z. B. Formatieren von Stilen, Kombinieren von Zellen usw.

Vorbereiten der Tabelle für den Export

Um eine HTML-Tabelle erfolgreich nach Excel zu exportieren, müssen Sie einige vorbereitende Schritte ausführen:

1. Definieren Sie die Tabelle, die Sie exportieren möchten. Stellen Sie sicher, dass es die erforderliche Struktur hat und alle erforderlichen Daten enthält.
2. Stellen Sie sicher, dass jede Zelle in der Tabelle ihre eigene eindeutige ID oder Klasse hat. Dies hilft Ihnen, beim Export auf bestimmte Zellen zuzugreifen.
3. Stellen Sie sicher, dass die Tabelle keine komplexen Elemente wie Formulare oder Referenzen enthält. Alle diese Elemente können nicht nach Excel exportiert werden und können den Exportvorgang unterbrechen.
4. Stellen Sie sicher, dass Ihre Tabelle keine versteckten Zeilen oder Spalten enthält. Alle Daten, die Sie exportieren möchten, müssen sichtbar sein.
5. Stellen Sie sicher, dass Ihre Tabelle keine verschachtelten Tabellen enthält. Excel unterstützt den Export geschachtelter Tabellen nicht, daher können sie beim Exportieren Ihrer Tabelle Probleme verursachen.
6. Stellen Sie sicher, dass die Stile Ihrer Tabelle vollständig in CSS definiert sind. Dadurch wird das Erscheinungsbild der Tabelle beim Export nach Excel beibehalten.

Nachdem Sie alle diese Schritte ausgeführt haben, ist die Tabelle bereit für den erfolgreichen Export mit jQuery nach Excel.

Hinzufügen einer Schaltfläche zum Exportieren

Um eine Schaltfläche hinzuzufügen, um eine HTML-Tabelle mit jQuery in Excel zu exportieren, müssen wir ein neues Schaltflächenelement erstellen oder ein vorhandenes Element verwenden, das wir zum Exportieren von Daten verwenden möchten.

1. Erstellen Sie ein Schaltflächenelement im HTML-Code mit dem Tag oder . Geben Sie ihm eine eindeutige ID mithilfe des id-Attributs , das wir im JavaScript-Code verwenden, um die Exportfunktionalität hinzuzufügen.

Beispiel für die Verwendung eines Tags :

Beachten Sie, dass wir die exportButton-ID für die Schaltfläche verwenden. Sie können eine beliebige andere ID auswählen, vorausgesetzt, sie ist auf der Seite eindeutig.

2. Fügen Sie dem Schaltflächenelement im JavaScript-Code mithilfe der .click() -Methode einen Ereignishandler hinzu. Innerhalb des Ereignishandlers rufen wir die Exportfunktion auf.

Beispiel für das Hinzufügen eines Ereignishandlers:

• $(function()
• • $("#exportButton").click(function()
  • • exportToExcel();

    Hier ist ExportToExcel() eine Funktion, die wir in einem anderen Codeabschnitt für den Export einer HTML-Tabelle nach Excel verschreiben. Wir rufen diese Funktion einfach auf, wenn wir auf eine Schaltfläche klicken.

    Jetzt haben Sie eine Schaltfläche zum Exportieren, die Sie Ihrer HTML-Tabelle mit jQuery hinzufügen können.

    Behandeln des Knopfdruckereignisses

    Wenn Sie beim Klicken auf eine Schaltfläche die Funktionalität zum Exportieren einer HTML-Tabelle in Excel hinzufügen möchten, müssen Sie das Klickereignis behandeln. In jQuery können Sie dazu die click() -Methode verwenden.

    Im folgenden Beispielcode wird ein Ereignishandler für eine Schaltfläche mit der ID exportButton hinzugefügt :

    $('button#exportButton').click(function() );

    Innerhalb der Handlerfunktion muss Code eingefügt werden, der ausgeführt wird, wenn auf die Schaltfläche geklickt wird. In diesem Fall ist dies der Code zum Exportieren der HTML-Tabelle nach Excel. Wie genau dies geschieht, hängt von der erforderlichen Funktionalität ab.

    Sie können bei Bedarf eine Bedingung hinzufügen, um den Code nur unter bestimmten Bedingungen auszuführen:

    $('button#exportButton').click(function()  >);

    In diesem Beispiel wird der Code zum Exportieren einer HTML-Tabelle in Excel nur ausgeführt, wenn auf der Seite ein Element mit der ID TableID vorhanden ist. Dies kann nützlich sein, wenn mehrere Tabellen auf der Seite vorhanden sind oder wenn der Code nur unter bestimmten Bedingungen ausgeführt werden soll.

    Wenn Sie nun auf die Schaltfläche mit der ID exportButton klicken, wird der entsprechende Code ausgeführt, um die HTML-Tabelle nach Excel zu exportieren. Auf diese Weise können Sie der Schaltfläche benutzerdefinierte Funktionen hinzufügen und die Aktionen beim Klicken steuern.

    Konvertieren einer HTML-Tabelle in das Excel-Format

    Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliothek mit Ihrem Projekt verbunden haben. Erstellen Sie zunächst eine Schaltfläche oder ein anderes Element, auf das der Benutzer klickt, um die Tabelle zu exportieren.

    Экспортировать в Excel

    Danach benötigen Sie einen Ereignishandler für diese Schaltfläche. In diesem Handler können Sie Code schreiben, der den Tabellenexport ausführt. Die grundlegende Logik zum Konvertieren einer HTML-Tabelle in das Excel-Format könnte folgendermaßen aussehen:

    $('button#export-btn').click(function());// Вызываем метод экспорта таблицы в формат Exceltable.exportToExcel();>);

    Wir erstellen ein Excel-Tabellenobjekt und durchlaufen jede Zeile der HTML-Tabelle, indem wir die Zeilen- und Zellenobjekte der Excel-Tabelle erstellen. Dann fügen wir der Excel-Tabelle Zeilen und Zellen hinzu. Schließlich rufen wir die Methode auf, die Tabelle in das Excel-Format zu exportieren.

    Wenn der Benutzer nun auf die Schaltfläche Nach Excel exportieren klickt, wird die Tabelle in das Excel-Format exportiert und auf seinem Computer gespeichert. Dies ist nützlich, wenn der Benutzer eine Tabelle in Excel anzeigen oder bearbeiten möchte.

    Mit dem obigen Code und der jQuery-Bibliothek können Sie eine HTML-Tabelle einfach in das Excel-Format konvertieren, ohne zusätzliche Programme oder Plugins installieren zu müssen.

    Excel-Datei herunterladen

    Nachdem wir unsere HTML-Tabelle erstellt und formatiert haben, können wir sie in eine Excel-Datei exportieren, um sie vom Benutzer herunterzuladen. Dazu verwenden wir die jQuery-Bibliothek und erstellen eine Funktion exportToExcel.

    In dieser Funktion erstellen wir zuerst eine neue Instanz des Excel-Objekts, indem wir die Funktion aufrufen Excel.create(). Dann rufen wir die Funktion auf addWorksheet um ein Arbeitsblatt zu unserer Excel-Datei hinzuzufügen. Danach durchlaufen wir jede Zeile und jede Zelle der HTML-Tabelle und verwenden die Funktionen writeText oder writeNumber schreiben Sie die entsprechenden Werte in die Zellen der Excel-Datei.

    Schließlich rufen wir die Funktion auf download Indem wir ihm den Namen der Excel-Datei übergeben, die der Benutzer beim Herunterladen sehen soll. Funktion download erstellt ein temporäres Element a mit Attributen href und download. und "klickt" automatisch auf dieses Element, wodurch die Excel-Datei heruntergeladen wird.

    Hier ist der vollständige Funktionscode exportToExcel:

    function exportToExcel() else >);>);// Скачивание файла Excel с помощью функции "download"excel.download("table-data.xlsx");>

    Jetzt, wo wir die Funktion aufrufen exportToExcel wenn Sie auf die Schaltfläche "Nach Excel exportieren" klicken, kann der Benutzer eine Excel-Datei mit Daten aus unserer HTML-Tabelle herunterladen.