Our Fall Release Arrives October 7th: Get a Sneak Peek Now

So integrieren Sie die Bearbeitung von Tabellen in eine Vue-Anwendung

Mit Apryse integrieren Entwickler die Bearbeitung von Tabellen einfach in eine Vue-Anwendung. Installieren Sie dazu WebViewer über eine Template-Referenz in einer Vue-Komponente, initialisieren Sie ihn in onMounted und binden Sie das Spreadsheet-Editor-SDK ein. Das Add-on öffnet XLSX-, XLS- und CSV-Dateien und läuft dank WebAssembly komplett im Browser. Für Bearbeitung, Formelberechnung und Export ist kein Server erforderlich. Da der Apryse Spreadsheet Editor als Add-on für das umfassende WebViewer SDK verfügbar ist, erweitern Sie Ihre Anwendung um Funktionen zur Tabellenbearbeitung, ohne zusätzliche Anbieter in Ihren Tech-Stack aufzunehmen. Zugleich steht Ihnen der gesamte Funktionsumfang von WebViewer zur Verfügung.

Vue-Tabelleneditoren und Vue-Data-Grid-Bibliotheken im Vergleich

Syncfusion Vue Spreadsheet, Handsontable und AG Grid sind drei Komponenten, die Entwickler häufig mit dem Spreadsheet-Editor-SDK von Apryse für Vue vergleichen.

Die Spreadsheet-Komponente von Syncfusion ist ein Excel-ähnlicher Editor mit eigener Formel-Engine und unterstützt den direkten Import und Export von XLSX-, XLS- und CSV-Dateien.

Handsontable und AG Grid sind Data Grids. Diese JavaScript-Komponenten stellen Daten in einer vertrauten, an Tabellenkalkulationen angelehnten Oberfläche dar, bieten jedoch nicht alle Funktionen einer echten Tabellenkalkulation. Beide Bibliotheken wandeln Daten aus dem State Ihrer Vue-App schnell in übersichtliche Tabellen um, die sich sortieren und filtern lassen.

Excel-Dateien in Data Grids bearbeiten

Copied to clipboard

AG Grid bietet einen integrierten XLSX-Export ohne weitere Bibliothek. Excel-Formate und Formeln setzen jedoch eine Enterprise-Lizenz voraus. Bei Handsontable ist der XLSX-Export nicht enthalten. Dafür müssen Sie ExcelJS als separate Peer-Abhängigkeit installieren. Für Formeln ist zudem das HyperFormula-Plugin nötig. Im Gegensatz zum Spreadsheet-Editor-SDK kann keines der beiden Tools eine vorhandene XLSX-Datei öffnen. AG Grid exportiert nur die aktuelle Grid-Ansicht, nicht die zuvor geladene Arbeitsmappe.

Für den Import einer XLSX-Datei in Handsontable müssen Sie eine separate Bibliothek zum Einlesen der Daten installieren. Eine integrierte Funktion zum Öffnen von Arbeitsmappen ist nicht verfügbar. Die Handsontable-Dokumentation nutzt SheetJS für XLSX und PapaParse für CSV. Diese Bibliotheken lesen die Datei im Browser ein. Anschließend können Sie die erkannte Kopfzeile in einer Vorschau prüfen und den Spalten im Grid zuordnen, bevor Sie die Daten laden. AG Grid verfolgt einen ähnlichen Ansatz: Die Anleitung zum Excel-Import nutzt eine externe Bibliothek, um die gewählte Datei einzulesen und die Inhalte als Zeilendaten zu übergeben. Bei beiden Lösungen bleibt die ursprüngliche Arbeitsmappe nicht vollständig erhalten. Formeln, Zellformate, mehrere Tabellenblätter und eingebettete Diagramme werden nicht übernommen. Importiert werden nur die reinen Werte.

Aktuelle Versionen von Handsontable setzen Vue 3.2 oder höher voraus. In einer Vue-2-Codebasis lässt sich daher nur eine ältere Version von Handsontable einsetzen. Apryse ist nicht an ein bestimmtes Framework gebunden und unterstützt sowohl Vue 2 als auch Vue 3. Unsere aktuelle Dokumentation ist auf Projekte mit Vue 3 ausgerichtet.

Feature
Syncfusion Vue Spreadsheet
Handsontable
Apryse Spreadsheet Editor
AG Grid
Datei-I/O (vorhandene XLSX-, XLS- oder CSV-Datei öffnen)
Nativer Import und Export von XLSX-, XLS- und CSV-Dateien.
Erfordert zusätzliche Bibliotheken.
Öffnen Sie XLSX-, XLS- und CSV-Dateien direkt. Speichern Sie Ihre Dateien und laden Sie sie im XLSX- oder PDF-Format herunter.
Integrierter Export von Werten; für den Import sind zusätzliche Bibliotheken erforderlich
Formel-Engine
Integrierte, mit Excel kompatible Formel-Engine als Teil der Spreadsheet-Komponente.
Zusätzliche Plugins erforderlich.
Wertet gängige mathematische und statistische Funktionen sowie Datums-, Zeit-, Finanz- und Suchfunktionen wie in Excel aus.
Keine Formelberechnung in Echtzeit. Werte aus Gettern lassen sich nur beim Export als statische Excel-Formeln ausgeben.
Diagramme
Die Diagrammfunktion ist eine separate Syncfusion-Komponente und nicht Teil der Arbeitsmappenansicht des Spreadsheet-Controls.
Nicht unterstützt.
Rendert bereits in die Arbeitsmappe eingebettete Diagramme. Nutzer können diese auswählen, verschieben und ihre Größe anpassen. Das Erstellen neuer Diagramme wird derzeit noch nicht unterstützt.
Zusätzliche Module erforderlich.
Zellenformatierung
Schriftarten, Füllfarben, Ausrichtung und bedingte Formatierung sind direkt in die Oberfläche des Spreadsheet-Editors integriert.
Beim Export werden die Formatierungen aus dem gerenderten DOM und den Zell-Renderern des Grids übernommen.
Schriftart, Schriftgröße, Textfarbe, Rahmen, Füllfarbe, Fettdruck, Kursivschrift, Unterstreichung und Durchstreichung.
Die Zellformatierung wird primär beim Export festgelegt und nicht direkt in der Arbeitsmappe gespeichert.
Export
XLSX, XLS, CSV und PDF.
XLSX (mit ExcelJS als Peer-Abhängigkeit) und CSV.
XLSX und PDF.
XLSX und CSV. Excel-spezifische Formate und Formeln erfordern eine Enterprise-Konfiguration.
Unterstützung für das Vue-Framework
Vue 3 und Vue 2, jeweils mit einer kommerziellen Lizenz. Eine kostenlose Community-Lizenz ist nur für kleine Unternehmen verfügbar.
Aktuelle Versionen unterstützen nur Vue 3. Der Support für Vue 2 wurde eingestellt. Für Vue 2 ist daher nur noch eine ältere Version von Handsontable verfügbar.
Vue 3 und Vue 2.
Vue 3 und Vue 2.
Ökosystem
Syncfusion bietet eine Komponente für Tabellen als Teil seiner „Essential Studio“-Suite an. PDF-, Word- und Excel-Dateien werden jeweils über separate Viewer- oder Editor-Produkte unterstützt, nicht über eine zentrale Plattform für Dokumente.
Handsontable bietet ein Grid, das ausschließlich für Datentabellen ausgelegt ist. Lösungen für die Anzeige und Konvertierung von Dokumenten, die Datenextraktion oder elektronische Signaturen gehören nicht zum Portfolio.
Apryse bietet das Spreadsheet-Editor-SDK als Add-on für das Web SDK an – neben dem DOCX-Editor-SDK, der PDF-Bearbeitung und weiteren Add-ons. Mit dem Apryse Developer Toolkit können Sie dieselbe Datei auch im Server SDK, Mobile SDK und Scanbot SDK nutzen. So erhalten Sie Funktionen zum Anzeigen, Bearbeiten, Konvertieren, Extrahieren und Signieren aus einer Hand.
AG Grid bietet ein Grid, das ausschließlich für die Darstellung von Daten ausgelegt ist. Diagramme sind nur als separates Enterprise-Modul verfügbar. Lösungen für die Anzeige, Konvertierung, Datenextraktion oder Signatur von Dokumenten gehören nicht zum Angebot.

Apryse WebViewer SDK in ein Vue-Projekt integrieren

So installieren Sie WebViewer und das Spreadsheet-Editor-SDK in Ihrem Vue-Projekt.

Rufen Sie zunächst Ihren kostenlosen Testschlüssel ab.

Installieren Sie anschließend dasselbe Dokumenten-Viewer-SDK-Paket, das für alle WebViewer-Integrationen genutzt wird:

Bevor Sie das SDK initialisieren, kopieren Sie die statischen Dateien aus node_modules/@pdftron/webviewer/public in ein öffentlich zugängliches Verzeichnis. Kopieren Sie bei einem Vite-Projekt die Dateien core, ui und webviewer.min.js in den public-Ordner. Weitere Details zur automatischen Einrichtung mit webpack und Vite finden Sie im Leitfaden für statische Dateien.

WebViewer in eine Vue-Komponente einbinden

Copied to clipboard

Binden Sie WebViewer mit der Composition API in onMounted an eine Template-Referenz. Übergeben Sie dem Konstruktor initialMode: WebViewer.Modes.SPREADSHEET_EDITOR, damit das Add-on direkt im Spreadsheet-Editor startet:

Auf das Ereignis SPREADSHEET_EDITOR_READY warten

Copied to clipboard

Auf den SpreadsheetEditorManager und das Workbook-Objekt kann erst zugegriffen werden, nachdem das Ereignis SPREADSHEET_EDITOR_READY ausgelöst wurde. Frühere Aufrufe schlagen ohne Fehlermeldung fehl. Entwickler sollten daher alle Aufrufe des Spreadsheet-Editors im Listener ausführen und nicht direkt nach Abschluss des Konstruktors.

Speichern Sie den Manager in einer Ref, wenn andere Teile der Komponente darauf zugreifen müssen. Da er sich nach dem Auslösen des Events nicht mehr ändert, können Sie auch eine einfache Variable in der Closure verwenden. Weitere Informationen finden Sie auf der Seite Events in der Dokumentation zum Spreadsheet-Editor.

Tabellendateien öffnen, bearbeiten und exportieren

Um eine vorhandene Datei zu laden, übergeben Sie im Konstruktor eine XLSX-, XLS- oder CSV-Datei an initialDoc. Nach dem Einbinden können Sie alternativ documentViewer.loadDocument() mit einer URL, einer Datei, einem Blob oder einer Base64-Zeichenfolge aufrufen, etwa über ein Datei-Eingabefeld in Vue. XLS- und CSV-Dateien werden beim Laden im Browser in das XLSX-Format konvertiert. Die gespeicherte Quelldatei bleibt dabei unverändert.

Wenn Sie initialMode: WebViewer.Modes.SPREADSHEET_EDITOR festlegen, wird die geladene Datei im Raster des Spreadsheet-Editors statt im normalen Dokumenten-Viewer geöffnet. Das Add-on startet standardmäßig im Ansichtsmodus. Nutzer können im Raster navigieren, berechnete Zellwerte anzeigen und zwischen Tabellenblättern wechseln, ohne Änderungen vorzunehmen. Den Bearbeitungsmodus aktivieren Sie separat und steuern so gezielt, wer Inhalte ändern darf.

Bearbeitungsmodus aktivieren

Copied to clipboard

Aktivieren Sie den Bearbeitungsmodus, indem Sie im SPREADSHEET_EDITOR_READY-Listener die Methode setEditMode(true) des SpreadsheetEditorManager aufrufen:

Das ist alles. Im Bearbeitungsmodus können Benutzer Zellen formatieren, etwa Schriftart, Schriftgröße, Farbe, Rahmen und Füllung anpassen sowie Text fett, kursiv, unterstrichen oder durchgestrichen darstellen. Zudem können sie Zeilen und Spalten hinzufügen oder löschen, Zellen verbinden und Tabellenblätter verwalten.

  • Die Formeln sind mit Excel kompatibel. Unterstützt werden gängige Funktionen für Mathematik, Statistik, Datum, Zeit, Finanzen und Suche, darunter VLOOKUP, INDEX und MATCH, sowie Text- und Logikfunktionen.
  • Bereits in der Arbeitsmappe eingebettete Diagramme werden angezeigt. Sie können ausgewählt, verschoben und in der Größe angepasst werden. Neue Diagramme lassen sich derzeit nicht erstellen. Auch Änderungen am Diagrammtyp oder Design sowie Pivot-Tabellen, Sortierung, Filter und bedingte Formatierung werden noch nicht unterstützt.

Exportieren und Speichern in Vue

Copied to clipboard

Das Apryse Spreadsheet-Editor-SDK speichert bearbeitete Dateien im XLSX- oder PDF-Format und stellt sie zum Download bereit. Das Speichern oder Exportieren im XLS- oder CSV-Format wird nicht unterstützt. Die Verarbeitung von Tabellen im Browser erfolgt über WebAssembly. So bleiben alle Daten der Arbeitsmappe während der Bearbeitung und des Exports im Browser.

Integration mit der Vue 2 Options API

Copied to clipboard

In Vue 2 gelten dieselben Muster für Konstruktoren und Events. Binden Sie WebViewer im Lifecycle-Hook mounted() ein und verwenden Sie this.$refs statt einer ref aus der Composition API.

Support auf einen Blick

Copied to clipboard
  • Plattform: Nur als Web-SDK verfügbar. Die Verarbeitung erfolgt über WebAssembly direkt im Browser. Eine Verbindung zum Server ist dafür nicht erforderlich.
  • Lizenzstufe: Zusatzlizenz als Ergänzung zur Basislizenz für das Web SDK.
  • Technischer Support: Kunden erhalten direkten technischen Support von den SDK-Entwicklern bei Apryse. Zusätzlich stehen eine aktive Entwickler-Community, Codebeispiele und eine umfassende Dokumentation zur Verfügung.
  • Unterstützte Frameworks: Vue 3 (Composition API) und Vue 2 (Options API) nutzen dasselbe @pdftron/webviewer-Paket wie React und Angular.
  • Dokumentation: Lesen Sie den Leitfaden zum Spreadsheet-Editor-SDK

Häufig gestellte Fragen

Ja. Vue 3 nutzt die Composition API mit einem Template-Ref und onMounted. Vue 2 nutzt die Options API mit this.$refs und dem Lifecycle-Hook mounted(). Beide binden dasselbe Paket @pdftron/webviewer und dasselbe Spreadsheet-Editor-SDK ein.

Ja. Sie können WebViewer wie jede andere Vue-3-Komponente mit der Composition API einbinden. Initialisieren Sie ihn dazu in onMounted über eine Template-Referenz. Da WebViewer Dokumente clientseitig mit WebAssembly rendert, darf die Initialisierung nur im Browser und nicht beim serverseitigen Rendering erfolgen.

Ja. Installieren Sie das Paket über npm und kopieren Sie die statischen Dateien aus node_modules/@pdftron/webviewer/public in Ihren public-Ordner – genau wie bei jedem anderen Vite-Projekt.

Nein. Der Spreadsheet-Editor unterstützt derzeit keine gemeinsame Bearbeitung durch mehrere Benutzer. Jede Sitzung arbeitet mit einer eigenen geladenen Kopie der Arbeitsmappe.

Speichern Sie die Referenz auf den SpreadsheetEditorManager, sobald das Ereignis SPREADSHEET_EDITOR_READY ausgelöst wurde – entweder in einer Referenz der Composition API oder in einer Dateneigenschaft der Komponente. Rufen Sie getSpreadsheetEditorManager() erst nach diesem Ereignis auf. Frühere Aufrufe bleiben ohne Fehlermeldung erfolglos.

Integrieren Sie die Bearbeitung von Tabellen direkt in Ihre Vue-Anwendung

Starten Sie noch heute mit dem Apryse Spreadsheet-Editor-SDK für Vue.

Sanity Image

© Apryse Software Inc.