How to Add Spreadsheet Editing to a Vue Application
Developers can easily add Spreadsheet Editing to a Vue application with Apryse. Just install WebViewer in a Vue component with a template ref, initialize it inside onMounted, and get the Spreadsheet Editor add-on. The Spreadsheet Editor add-on opens XLSX, XLS, and CSV files, runs entirely client-side through WebAssembly, and requires no server for editing, formula evaluation, or export. Because the Apryse Spreadsheet Editor is one add-on for the full-featured WebViewer SDK, it's a great way to build spreadsheet editing capabilities without adding additional vendors to your stack, while also taking advantage of the full range of core WebViewer capabilities.
Vue Spreadsheet Editors vs. Vue Data Grid Libraries
Syncfusion Vue Spreadsheet, Handsontable, and AG Grid are three components developers often evaluate against the Apryse Spreadsheet Editor for Vue. Apryse also offers a React spreadsheet editor and Angular spreadsheet integration for teams building across frameworks.
Syncfusion's Spreadsheet control is an Excel-like editor with its own formula engine and native XLSX, XLS, and CSV import and export.
Handsontable and AG Grid are data grids. A data grid is a JavaScript component designed to display data in a familiar, spreadsheet-like interface, without the full depth and breadth of a true spreadsheet experience. Both these data grid libraries render fast, sortable, filterable tables from data already in your Vue app's state.
Using Data Grids to Work with Excel Files
AG Grid ships built-in XLSX export with no extra library, though Excel-specific styling and formulas need an Enterprise license. Handsontable's XLSX export isn't built in: it requires installing the separate ExcelJS peer dependency, and formula calculation requires the separate HyperFormula plugin on top of that. Neither opens an existing XLSX workbook as a file the way the Spreadsheet Editor does: AG Grid's export converts the grid's current view, not a workbook you loaded.
To import an XLSX file into Handsontable, you need to install a parsing library yourself; there's no built-in "open workbook" method. Handsontable's own guide pairs SheetJS for XLSX with PapaParse for CSV: you parse the file in the browser, preview the detected header row, and map it to the grid's column configuration before loading any rows. AG Grid works the same way. Its Excel import guide uses a third-party library to parse the selected file and pass the result in as row data. Neither approach preserves the original workbook: formulas, cell formatting, multiple sheets, and embedded charts don't come through. You get plain values only.
Current Handsontable releases require Vue 3.2 or later, so a Vue 2 codebase is limited to an older Handsontable release. Apryse is framework-agnostic; it works with Vue 2 and Vue 3. Currently, our documentation guides are for a Vue 3 project.
If your application also needs Word document editing, the Vue DOCX Editor covers that use case alongside the Spreadsheet Editor.
Installing the Apryse WebViewer SDK in a Vue Project
Here's how to install WebViewer and the Spreadsheet Editor SDK in your Vue project.
First, get your trial license key.
Then install the same document viewer SDK package used across every WebViewer framework integration:
WebViewer requires copying static assets from node_modules/@pdftron/webviewer/public into a publicly served directory before the SDK initializes. In a Vite project, copy the core, ui, and webviewer.min.js files into your public folder. See the static assets guide for webpack and Vite automation options.
Mounting WebViewer in a Vue Component
In the Composition API, mount WebViewer to a template ref inside onMounted. Pass initialMode: WebViewer.Modes.SPREADSHEET_EDITOR in the constructor so the add-on opens directly in Spreadsheet Editor mode:
Listening for the SPREADSHEET_EDITOR_READY Event
SpreadsheetEditorManager and the Workbook object are accessible after the SPREADSHEET_EDITOR_READY event fires. Calls made before this event fail silently, so developers should gate every Spreadsheet Editor call behind the listener rather than calling it directly after the constructor resolves.
Store the manager in a ref if other parts of the component need it. It does not change after the event fires, so a plain variable in the closure works as well. Visit the events page in the Spreadsheet Editor docs to learn more.
Loading, Editing, and Exporting Spreadsheet Files
To load an existing file, pass an XLSX, XLS, or CSV file to initialDoc in the constructor, or call documentViewer.loadDocument() with a URL, File, Blob, or base64 string to load a file after mount, such as from a Vue file input. XLS and CSV files convert to XLSX in the browser on load. The source file in storage is not modified.
With initialMode: WebViewer.Modes.SPREADSHEET_EDITOR set, the loaded file opens in the Spreadsheet Editor grid rather than the standard document viewer. The add-on opens in View mode by default: read-only grid navigation, calculated cell values, and sheet switching. Edit mode is a separate step, helping you control access.
Enabling Edit Mode
Switch to Edit mode by calling setEditMode(true) on the SpreadsheetEditorManager, inside the SPREADSHEET_EDITOR_READY listener:
That's all you need. In Edit mode, users format cells (font, size, color, borders, fill, bold, italic, underline, strikethrough), add and delete rows and columns, merge cells, and manage sheets.
- Formula support is Excel-compatible and covers common mathematical, statistical, date and time, financial, and lookup functions such as VLOOKUP, INDEX, and MATCH, along with common text and logical functions.
- Charts already embedded in the workbook render, and users select, move, and resize them. Creating new charts, changing chart types, and chart styling are not currently supported. Pivot tables, sorting, filtering, and conditional formatting are also not currently supported.
Exporting and Saving from Vue
The Apryse Spreadsheet Editor saves and downloads edited files as XLSX or PDF. It does not save or export back to XLS or CSV. The client-side spreadsheet processing runs through WebAssembly, no workbook data leaves the browser during editing or export.
Vue 2 Options API Integration
The same constructor and event pattern apply in Vue 2. Mount WebViewer inside the mounted() lifecycle hook, using this.$refs instead of a Composition API ref.
Support at a Glance
- Surface: Web SDK only. Runs client-side in the browser via WebAssembly. No server round trip for editing.
- Licensing tier: Add-on license, in addition to the base Web SDK license.
- Technical Support: Customers get technical help directly from Apryse's own SDK developers, backed by an active developer community, code samples, and documentation.
- Framework support: Vue 3 (Composition API) and Vue 2 (Options API), through the same @pdftron/webviewer package used for React and Angular.
- Docs: Visit the Spreadsheet Editor Guide
