Devextreme ist ein leistungsfähiges Toolset für die Entwicklung von Webanwendungen, das verschiedene Komponenten der Benutzeroberfläche bereitstellt, einschließlich des leistungsstarken Tabellensteuerelements Datagrid. Eine der häufigsten Aufgaben bei der Entwicklung von Webanwendungen besteht darin, Daten aus einer Tabelle in das Excel-Format zu exportieren. In diesem Tutorial erfahren Sie, wie Sie Daten aus einem Devextreme Datagrid im Excel-Format exportieren.
Der erste Schritt zum Exportieren von Daten nach Excel besteht darin, den Export in das Devextreme Datagrid zu konfigurieren. Im Datagrid-Steuerelement muss die Option "allowExporting" auf "true" festgelegt werden. Dadurch können Benutzer Daten aus einer Tabelle exportieren.
Beispielcode:
Sobald die Option "allowExporting" konfiguriert ist, fügen Sie der Seite eine Exportschaltfläche hinzu, auf die der Benutzer klicken kann, um den Exportvorgang zu starten. Erstellen Sie dazu eine Schaltfläche mit dem Tag "button" oder einem anderen geeigneten Steuerelement, und fügen Sie einen Onclick-Ereignishandler hinzu, der die Funktion "exportData" aufruft, um Daten aus dem Datagrid zu exportieren.
Der letzte Schritt besteht darin, den Datenexport in die Funktion "exportData" zu implementieren. Sie können die ExcelJS-Bibliothek oder eine andere geeignete Open-Source-Bibliothek zum Exportieren von Daten verwenden. Erstellen Sie in dieser Funktion eine neue Instanz einer Excel-Arbeitsmappe, fügen Sie das Datenblatt hinzu und füllen Sie es mit den Daten aus dem Datagrid aus. Speichern Sie dann die Arbeitsmappe im Excel-Format und bitten Sie den Benutzer, die Datei herunterzuladen.
Beispielcode:function exportData()
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Daten');
// Hier ist die Implementierung des Tabellenfüllens mit Daten aus einem Datagrid
workbook.xlsx.writeBuffer().then(data =>
const blob = new Blob([data], );
saveAs(blob, 'export.xlsx');
>);
>
Wenn Sie diese einfachen Schritte befolgen, können Sie Daten aus dem Devextreme Datagrid problemlos in das Excel-Format exportieren. Denken Sie daran, dass das Konfigurieren der Option "allowExporting", das Hinzufügen einer Exportschaltfläche und das Implementieren der Datenexportfunktion alles sind, was Sie tun müssen.
Exportieren eines Devextreme Datagrid nach Excel: Eine einfache Anleitung
Stellen Sie zunächst sicher, dass Sie die neueste Version von Devextreme installiert haben, und fügen Sie Ihrem Projekt die erforderlichen Abhängigkeiten hinzu. Erstellen Sie dann eine Datagrid-Instanz und füllen Sie sie mit Daten aus. Zum Beispiel:
var dataGrid = new DevExpress.ui.dxDataGrid("#gridContainer", >);Um nun die Option zum Exportieren von Daten nach Excel zu aktivieren, fügen Sie den folgenden Code zu Ihrem Code hinzu:
var exportButton = $("#exportButton");exportButton.dxButton(>);Fügen Sie in Ihrer HTML-Datei eine Schaltfläche c hinzu, die den Export der Daten startet, wenn Sie darauf klicken:
Wenn der Benutzer nun auf die Schaltfläche "Nach Excel exportieren" klickt, werden die Daten aus dem Datagrid in einer Excel-Datei auf ihrem Computer gespeichert.
Stellen Sie abschließend sicher, dass Ihre Daten mit dem Excel-Format kompatibel sind, um sicherzustellen, dass sie nach dem Export korrekt angezeigt werden.
Das Exportieren eines Devextreme Datagrid nach Excel ist eine einfache und effektive Möglichkeit, dem Benutzer die Möglichkeit zu geben, Daten in einem für sie geeigneten Format zu speichern. Wenn Sie diese Anleitung befolgen, können Sie diese Funktionalität problemlos in Ihrem Projekt implementieren.
