Section:

Apryse Spreadsheet Editor Basic Setup

Requirements
View Demo
Web SDK
Package: Spreadsheet Editor
iFrame - WebViewer

Enable Spreadsheet Editor and load an initial or blank spreadsheet. From there, view, edit, or create data in your .xlsx spreadsheet.

Spreadsheet Editor is currently supported in the iframe version of the Web SDK Modular UI. For more details on initializing in iframe mode, refer to this guide.

You must have WebViewer installed to be able to use Spreadsheet Editor.

Get started video

Learn how to enable the Apryse Spreadsheet Editor through the Apryse WebViewer by viewing our video. In this video we build a React with Vite project and integrate the Apryse WebViewer with the Spreadsheet Editor enabled. You can also skip the video and follow the steps below to get started instead.

Builds a React with Vite Spreadsheet Editor in the browser

Prerequisites

Before you start:

  • Install Node and npm to use as your run-time environment/package manager.
  • 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.

WebViewer Constructor

To enable the spreadsheet editor, you can pass the initialMode parameter in WebViewer’s constructor options. Omitting the initialDoc will load an empty spreadsheet. The following sample loads an existing spreadsheet:

WebViewer Spreadsheet Editor

1WebViewer.Iframe({
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});

Below is an example of how the code might look in an HTML project where WebViewer is integrated and Spreadsheet Editor is enabled:

HTML

index.html

1<html>
2<head>
3  <title>Basic WebViewer</title>
4  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
5</head>
6
7<!-- Import WebViewer as a script tag -->
8<script src='/lib/webviewer/webviewer.min.js'></script>
9
10<body>
11  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'></div>
12  <script>
13// Enable Spreadsheet Editor 
14WebViewer.Iframe({
15  path: 'lib/webviewer', // Path to the 'lib' folder on your server
16  licenseKey: 'YOUR_LICENSE_KEY', //Sign up to get a license key at https://dev.apryse.com
17  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
18  initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
19  // initialDoc: '/path/to/my/file.pdf', // You can also use documents on your server
20}, document.getElementById('viewer'))
21  .then(instance => {
22    const { documentViewer, annotationManager } = instance.Core;
23
24// Call methods from instance, documentViewer, and annotationManager as needed
25
26// You can also access major namespaces from the instance as follows:
27  // const Tools = instance.Core.Tools;
28 //  const Annotations = instance.Core.Annotations;
29 
30// call methods relating to the loaded document
31    documentViewer.addEventListener('documentLoaded', () => {
32    });
33  })
34</script>
35</body>
36</html>

Load a spreadsheet

If you are switching to the spreadsheet editor from the PDF editor, the initialMode parameter is needed in the options when calling the UI.loadDocument API:

UI.loadDocument

1WebViewer.Iframe(...)
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  });

You can also use the enableOfficeEditing: true property to load the spreadsheet editor. If you are passing in a blob, make sure to pass the extension option as xlsx. If you are passing in a file path it requires the file extension .xlsx:

JavaScript

1WebViewer.Iframe(...)
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  });

Listen for editor ready event

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 sample waits for the editor to be ready before enabling EDITING mode:

JavaScript

1WebViewer.Iframe(...)
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  });

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales