Section:

Get started with Apryse Spreadsheet Editor

Requirements
View Demo
Web SDK
Package: Spreadsheet Editor

Get started with Spreadsheet Editor by enabling it and loading an initial or blank spreadsheet. From there, view, edit, or create data in your XLSX spreadsheet. For more, see the Spreadsheet Editor overview.

The web component version of the Web SDK Modular UI is the recommended integration method and supports the latest WebViewer features. The Spreadsheet Editor also supports Iframe mode for legacy integrations. See Using an iframe and Iframe vs Web Component for more details.

Info

  • You must install WebViewer to use Spreadsheet Editor.
  • In this guide, Spreadsheet Editor refers to the UI, and Spreadsheet Editor Manager refers to the API that controls its lifecycle and state.

Get started videos

Learn how to integrate WebViewer and enable the Apryse Spreadsheet Editor by selecting a tab and viewing the corresponding video. All videos integrate WebViewer with the Spreadsheet Editor enabled.

  • 11.10+ React with Vite: Uses a web component in React.
  • 11.8-11.9 React with Vite: Uses an iframe in React.
  • 11.8-11.9 Nuxt: Uses an iframe with Nuxt.

You can also skip the videos and go to the WebViewer constructor section to get started.

How to ad Spreadsheet Editor 11.10 in a React project

Prerequisites

Before you start:

  • Install Node.js and npm. We recommend using the latest active LTS release.
  • Create a folder for your project.
  • Integrate WebViewer into your project.
  • Open a text editor like Visual Studio Code.
  • Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

Enable Spreadsheet Editor

To enable the Spreadsheet Editor, set the initialMode parameter in the WebViewer constructor. Supported values are defined in the Modes enum. Omitting initialDoc will load an empty spreadsheet. The following example loads an existing spreadsheet.

JavaScript

1WebViewer({
2  path: '/lib',
3  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
4  initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
5  ...,
6}, document.getElementById('viewer')).then(instance => {
7  
8});

Related Links

This example shows how to implement the code in an HTML project with WebViewer and the Spreadsheet Editor enabled.

HTML

index.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>Basic WebViewer</title>
7</head>
8
9<body>
10  <!-- Add WebViewer container -->
11  <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
12  
13  <!-- Load WebViewer library -->
14  <script src="/lib/webviewer/webviewer.min.js"></script>
15
16  <script>
17    // Initialize WebViewer with Spreadsheet Editor enabled
18    WebViewer(
19      {
20        // Specify path to WebViewer 'lib' folder
21        path: '/lib/webviewer',
22        // Sign up to get a license key at https://dev.apryse.com
23        licenseKey: 'YOUR_LICENSE_KEY',
24        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
25        initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
26      },
27      document.getElementById('viewer')
28    ).then((instance) => {
29      const { documentViewer, annotationManager } = instance.Core;
30      
31      // Call methods from instance, documentViewer, and annotationManager as needed
32      // Access additional namespaces as follows:
33      // const Tools = instance.Core.Tools;
34      // const Annotations = instance.Core.Annotations;
35
36      documentViewer.addEventListener('documentLoaded', () => {
37        // Call methods relating to the loaded document
38      });
39    });
40  </script>
41</body>
42</html>

By default, the Spreadsheet Editor opens in view‑only mode. To start in editing mode, set the initialEditMode property within the spreadsheetEditorOptions parameter in the WebViewer constructor.

The following example loads a spreadsheet in editing mode, allowing you to interact with and modify its contents.

JavaScript

1WebViewer({
2  path: '/lib',
3  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
4  initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
5  spreadsheetEditorOptions: {
6    initialEditMode: 'editing',
7  },
8  ...,
9}, document.getElementById('viewer')).then(instance => {
10  
11});

Related Links

Load a spreadsheet

To load a spreadsheet using the Spreadsheet Editor, call the UI.loadDocument() method. If you're switching from the PDF viewer, include the initialMode option and set it to WebViewer.Modes.SPREADSHEET_EDITOR.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const filePath = 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx';
4    instance.UI.loadDocument(filePath, {
5      initialMode: WebViewer.Modes.SPREADSHEET_EDITOR
6    });
7  });

Related Links

You can also use the enableOfficeEditing: true property to load the Spreadsheet Editor. If you pass a file as a blob, make sure to include the extension option with the value xlsx. When you pass in a file path, it must have the .xlsx extension.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const filePath = 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx';
4    instance.Core.documentViewer.loadDocument(filePath, {
5      enableOfficeEditing: true,
6    });
7  });

Related Links

Listen for editor-ready events

Before performing any programmatic actions, you must listen for the SPREADSHEET_EDITOR_READY event. This event fires after the editor has initialized and is ready for interaction. The following example waits for the editor to initialize before enabling EDITING mode:

JavaScript

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, SpreadsheetEditor } = instance.Core;
4    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
5    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
6    
7    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
8      await spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
9    });
10  });

Related Links

Next steps

To explore additional document workflows and features, see:

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales