Zum Hauptinhalt springen

Datenladen und -export

Sie können DHTMLX Spreadsheet mit einem vorbereiteten Datensatz befüllen, der sowohl Zelldaten als auch Stile enthalten kann. Die Komponente unterstützt zwei Möglichkeiten zum Laden von Daten:

  • Laden aus einer externen Datei
  • Laden aus einer lokalen Quelle

Die Komponente unterstützt auch den Export von Daten in eine Excel-Datei.

Daten vorbereiten​

DHTMLX Spreadsheet erwartet Daten im JSON-Format.

Es kann ein einfaches Array mit Zell-Objekten sein. Verwenden Sie diese Methode, wenn Sie einen Datensatz für nur ein Tabellenblatt erstellen möchten.

Daten für ein Tabellenblatt vorbereiten
const data = [
    { cell: "A1", value: "Country" },
    { cell: "B1", value: "Product" },
    { cell: "C1", value: "Price" },
    { cell: "D1", value: "Amount" },
    { cell: "E1", value: "Total Price" },

    { cell: "A2", value: "Ecuador" },
    { cell: "B2", value: "Banana" },
    { cell: "C2", value: 6.68, format:"currency" },
    { cell: "D2", value: 430, format:"percent" },
    // "myFormat" ist die ID eines benutzerdefinierten Formats
    { cell: "E2", value: 2872.4, format:"myFormat" },
    
    // Dropdown-Listen zu Zellen hinzufügen
    { cell: "A9", value: "Turkey", editor: {type: "select", options: ["Turkey","India","USA","Italy"]} },
    { cell: "B9", value: "", editor: {type: "select", options: "B2:B8" } },

    // weitere Zell-Objekte
];

Oder es kann ein Objekt mit Daten sein, die gleichzeitig in mehrere Tabellenblätter geladen werden. Zum Beispiel:

Daten für mehrere Tabellenblätter vorbereiten
const data = {
    sheets: [
        { 
            name: "sheet 1", 
            id: "sheet_1",
            data: [
                { cell: "A1", value: "Country" },
                { cell: "B1", value: "Product" },
                // weitere Daten
            ],
            merged: [
                // Zellen A1 und B1 zusammenführen
                { from: { column: 0, row: 0 }, to: { column: 1, row: 0 } },
                // Zellen A2, A3, A4 und A5 zusammenführen
                { from: { column: 0, row: 1 }, to: { column: 0, row: 4 } },
            ]
        }, 
        { 
            name: "sheet 2", 
            id: "sheet_2", 
            data: [
                { cell: "A1", value: "Country" },
                { cell: "B1", value: "Product" },
                // weitere Daten
            ]
        },
        // weitere Tabellenblatt-Objekte
    ]
};

Die vollständigen Listen der verfügbaren Eigenschaften für diese beiden Methoden finden Sie in der API-Referenz.

Tipp

Die Möglichkeit, zusammengeführte Zellen zu laden, ist nur verfügbar, wenn Sie Daten in einem Tabellenblatt-Objekt vorbereiten.

Stile für Zellen festlegen​

Möglicherweise müssen Sie das Zell-Styling im Datensatz definieren. In diesem Fall sollte der Datensatz ein Objekt mit separaten Eigenschaften sein, die Datenobjekte und CSS-Klassen beschreiben, die auf bestimmte Zellen angewendet werden.

Legen Sie eine CSS-Klasse für eine Zelle mit der css-Eigenschaft fest.

const styledData = {
    styles: {
        someclass: {
            background: "#F2F2F2",
            color: "#F57C00"
        }
    },
    data: [
        { cell: "A1", value: "Country" },
        { cell: "B1", value: "Product" },
        { cell: "C1", value: "Price" },
        { cell: "D1", value: "Amount" },
        { cell: "E1", value: "Total Price" },

        { cell: "A2", value: "Ecuador" },
        { cell: "B2", value: "Banana" },
        { cell: "C2", value: 6.68, css: "someclass" },
        { cell: "D2", value: 430, css: "someclass" },
        { cell: "E2", value: 2872.4 }
    ],
}
Info

Sehen Sie die Liste der Eigenschaften, die Sie für das Styling von Zellen verwenden können

Gesperrten Zustand einer Zelle festlegen​

Wenn Sie gesperrte Zellen in einem Datensatz angeben möchten, verwenden Sie die locked-Eigenschaft einer Zelle und setzen Sie sie auf true:

const dataset = [
    { cell: "a1", value: "Country", locked: true }, // sperrt eine Zelle
    { cell: "b1", value: "Product", locked: true },   

    { cell: "a2", value: "Ecuador" },
    { cell: "b2", value: "Banana" },

    { cell: "a3", value: "Belarus" },
    { cell: "b3", value: "Apple" },
    // weitere Zellen
];

Die vollständige Liste der verfügbaren Zell-Eigenschaften finden Sie in der API-Referenz.

Verwandtes Beispiel: Spreadsheet. Gesperrte Zellen

Sie können einen Link für eine Zelle direkt im Datensatz angeben. Dazu setzen Sie die link-Eigenschaft als Objekt und geben die erforderlichen Einstellungen an:

  • text - (optional) der Text eines Links
  • href - (erforderlich) die URL, die das Link-Ziel definiert

So sieht es in einem Datensatz aus:

const dataset = [
    { cell: "a1", value: "Country"}, // sperrt eine Zelle
    { cell: "b1", value: "Product"},   

    { cell: "a2", value: "Ecuador"},
    { 
        cell: "b2", 
        value: "Banana", 
        link:{
            href:"http://localhost:8080/"
        } 
    },
    // weitere Zellen
];
Hinweis

Beachten Sie, dass Sie die value-Eigenschaft des cell-Objekts und die text-Eigenschaft des link-Objekts nicht gleichzeitig verwenden sollten, da sie sich gegenseitig ausschließen.

Verwandtes Beispiel: Spreadsheet. Import und Export nach JSON

Externes Datenladen​

JSON-Daten laden​

Standardmäßig erwartet Spreadsheet Daten im JSON-Format. Um Daten aus einer externen Quelle zu laden, verwenden Sie die Methode load(). Sie nimmt die URL der Datei mit den Daten als Parameter entgegen:

var spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.load("../common/data.json");

Verwandtes Beispiel: Spreadsheet. Daten laden

Info

Wenn Sie es Benutzern ermöglichen möchten, eine JSON-Datei über den Datei-Explorer in das Spreadsheet zu importieren, lesen Sie JSON-Dateien laden.

CSV-Daten laden​

Sie können auch Daten im CSV-Format laden. Dazu müssen Sie die Methode load() aufrufen und den Namen des Formats ("csv") als zweiten Parameter übergeben:

var spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.load("../common/data.csv", "csv");

Verwandtes Beispiel: Spreadsheet. CSV laden

Excel-Datei laden (.xlsx)​

Sie können eine Datei im Excel-Format mit der Erweiterung .xlsx in ein Spreadsheet laden. In der Benutzeroberfläche gibt es entsprechende Steuerelemente in der Symbolleiste und im Menü:

  • Menü: Datei -> Importieren als..-> Microsoft Excel(.xlsx)

DHTMLX Spreadsheet Dateimenü mit der Option "Importieren als" für Microsoft Excel XLSX-Dateien

  • Symbolleiste: Importieren -> Microsoft Excel(.xlsx)

DHTMLX Spreadsheet Symbolleiste mit der Importschaltfläche für Microsoft Excel XLSX-Dateien

So importieren Sie Daten​

Hinweis

Beachten Sie, dass die Import-Funktion in Internet Explorer nicht funktioniert.

DHTMLX Spreadsheet verwendet die WebAssembly-basierte Bibliothek Excel2Json, um Daten aus Excel zu importieren. Um Excel-Daten in Spreadsheet zu laden, müssen Sie:

  • die Bibliothek Excel2Json installieren
  • die Option importModulePath in der Spreadsheet-Konfiguration angeben und den Pfad zur worker.js-Datei auf eine von zwei Arten festlegen:
    • indem Sie einen lokalen Pfad zur Datei auf Ihrem Computer angeben, z. B.: "../libs/excel2json/1.0/worker.js"
    • indem Sie einen Link zur Datei von CDN angeben: "https://cdn.dhtmlx.com/libs/excel2json/1.0/worker.js"
var spreadsheet = new dhx.Spreadsheet(document.body, {          
    importModulePath: "../libs/excel2json/1.0/worker.js"
});

Verwandtes Beispiel: Spreadsheet. Benutzerdefinierter Import-/Exportpfad

Um Daten aus einer Excel-Datei zu laden, übergeben Sie einen String mit dem Erweiterungstyp ("xlsx") als zweiten Parameter der Methode load():

// nur .xlsx
spreadsheet.load("../common/data.xlsx", "xlsx");
Hinweis

Beachten Sie, dass die Komponente nur den Import aus Excel-Dateien mit der Erweiterung .xlsx unterstützt.

Verwandtes Beispiel: Spreadsheet. Xlsx importieren

Sie können bei Bedarf auch Daten aus einem Spreadsheet in eine Excel-Datei exportieren.

Nach dem Laden ausgeführten Code verarbeiten​

Die Komponente führt einen AJAX-Aufruf durch und erwartet, dass die Remote-URL gültige Daten liefert. Das Laden von Daten ist asynchron, daher müssen Sie jeden Code, der nach dem Laden ausgeführt werden soll, in ein Promise einschließen:

spreadsheet.load("/some/data").then(function(){
   // etwas tun
});

Laden aus einer lokalen Quelle​

Um Daten aus einer lokalen Quelle zu laden, verwenden Sie die Methode parse(). Übergeben Sie einen vorbereiteten Datensatz als Parameter dieser Methode:

const spreadsheet = new dhx.Spreadsheet("spreadsheet");
spreadsheet.parse(data);

Verwandtes Beispiel: Spreadsheet. Benutzerdefinierte Zellenanzahl

Einzelheiten zum Laden mehrerer Tabellenblätter in das Spreadsheet finden Sie im Artikel Mit Tabellenblättern arbeiten.

Zustand speichern und wiederherstellen​

Um den aktuellen Zustand eines Spreadsheets zu speichern, verwenden Sie die Methode serialize(). Sie konvertiert Daten in ein Array von JSON-Objekten. Jedes JSON-Objekt enthält die Konfiguration einer Zelle.

// Zustand von spreadsheet1 speichern
var state = spreadsheet1.serialize();

Anschließend können Sie die im gespeicherten Zustand-Array gespeicherten Daten in ein anderes Spreadsheet einlesen. Zum Beispiel:

// ein neues Spreadsheet erstellen
var spreadsheet2 = new dhx.Spreadsheet(document.body);
// den Zustand von spreadsheet1 in spreadsheet2 einlesen
spreadsheet2.parse(state);

Daten exportieren​

Export nach Excel​

DHTMLX Spreadsheet kann Daten aus einem Spreadsheet in eine Excel-Datei exportieren. In der Benutzeroberfläche gibt es entsprechende Steuerelemente in der Symbolleiste und im Menü:

  • Menü: Datei -> Herunterladen als..-> Microsoft Excel(.xlsx)

DHTMLX Spreadsheet Dateimenü mit der Option "Herunterladen als" für den Microsoft Excel XLSX-Export

  • Symbolleiste: Exportieren -> Microsoft Excel(.xlsx)

DHTMLX Spreadsheet Symbolleiste mit der Exportschaltfläche zum Speichern als Microsoft Excel XLSX

So exportieren Sie Daten​

Hinweis

Beachten Sie, dass die Export-Funktion in Internet Explorer nicht funktioniert.

Die Bibliothek verwendet die WebAssembly-basierte Bibliothek Json2Excel, um Daten nach Excel zu exportieren. Der Export wird in der worker.js-Datei der Bibliothek Json2Excel verarbeitet (der Standard-Link ist https://cdn.dhtmlx.com/libs/json2excel/next/worker.js?vx). Sie können entweder den öffentlichen Export-Server oder einen lokalen Export-Server verwenden. Um Dateien zu exportieren, müssen Sie:

  • die Option exportModulePath in der Spreadsheet-Konfiguration angeben und den Pfad zur worker.js-Datei festlegen:
    • wenn Sie den öffentlichen Export-Server verwenden, müssen Sie den Link dazu nicht angeben, da er standardmäßig verwendet wird
    • wenn Sie Ihren eigenen Export-Server verwenden, müssen Sie:
      • die Bibliothek Json2Excel installieren
      • "../libs/json2excel/x.x/worker.js?vx" für eine bestimmte Version verwenden (ersetzen Sie x.x durch die auf Ihrem Server bereitgestellte Version)
var spreadsheet = new dhx.Spreadsheet(document.body, {          
    exportModulePath: "../libs/json2excel/x.x/worker.js?vx" // der Pfad zum Exportmodul, wenn ein lokaler Export-Server verwendet wird
});

Verwandtes Beispiel: Spreadsheet. Benutzerdefinierter Import-/Exportpfad

Sobald Sie die erforderlichen Quellen angepasst haben, können Sie die zugehörige API-Methode xlsx() des Export-Objekts verwenden, um die Daten der Komponente zu exportieren, wie folgt:

spreadsheet.export.xlsx();

Verwandtes Beispiel: Spreadsheet. Xlsx exportieren

Hinweis

Bitte beachten Sie, dass die Komponente nur den Export in Excel-Dateien mit der Erweiterung .xlsx unterstützt.

So legen Sie einen benutzerdefinierten Namen für eine exportierte Datei fest​

Standardmäßig lautet der Name einer exportierten Datei "data". Sie können einen eigenen Namen für eine exportierte Datei angeben. Dazu müssen Sie einen benutzerdefinierten Namen als Parameter der Methode xlsx() übergeben:

spreadsheet.export.xlsx("MyData");

Verwandtes Beispiel: Spreadsheet. Xlsx exportieren

Sehen Sie die Schritte zum Importieren von Daten aus einer Excel-Datei in Spreadsheet.

Export nach JSON​

Ab v4.3 kann die Bibliothek auch Daten aus einem Spreadsheet in eine JSON-Datei exportieren. Verwenden Sie dazu die Methode json() des Export-Objekts:

spreadsheet.export.json();

Verwandtes Beispiel: Spreadsheet. Export/Import JSON

Need more help?Contact Support