Get started with Apryse Spreadsheet Editor

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKPackage: Spreadsheet EditorLive demo

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.

11.10+: React with Vite

How to ad Spreadsheet Editor 11.10 in a React project

11.8-11.9: React with Vite

Integrate WebViewer and enable Spreadsheet Editor in a React with Vite project

11.8-11.9: Nuxt

Integrate WebViewer and enable Spreadsheet Editor in a Nuxt 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.

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

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

WebViewerOptions Modes

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Basic WebViewer</title>
</head>

<body>
  <!-- Add WebViewer container -->
  <div id="viewer" style="width: 100%; height: 100vh; margin: 0 auto;"></div>
  
  <!-- Load WebViewer library -->
  <script src="/lib/webviewer/webviewer.min.js"></script>

  <script>
    // Initialize WebViewer with Spreadsheet Editor enabled
    WebViewer(
      {
        // Specify path to WebViewer 'lib' folder
        path: '/lib/webviewer',
        // Sign up to get a license key at https://dev.apryse.com
        licenseKey: 'YOUR_LICENSE_KEY',
        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
        initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
      },
      document.getElementById('viewer')
    ).then((instance) => {
      const { documentViewer, annotationManager } = instance.Core;
      
      // Call methods from instance, documentViewer, and annotationManager as needed
      // Access additional namespaces as follows:
      // const Tools = instance.Core.Tools;
      // const Annotations = instance.Core.Annotations;

      documentViewer.addEventListener('documentLoaded', () => {
        // Call methods relating to the loaded document
      });
    });
  </script>
</body>
</html>

By default, the Spreadsheet Editor opens in view mode. To start in edit 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

WebViewer({
  path: '/lib',
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/invoice_template.xlsx',
  initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
  spreadsheetEditorOptions: {
    initialEditMode: WebViewer.InitialEditModes.EDITING,
  },
  ...,
}, document.getElementById('viewer')).then(instance => {
  
});

WebViewerOptions InitialEditModes

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

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

UI.loadDocument()

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

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

UI.loadDocument()

Listen for editor-ready events

Before performing any programmatic actions, you must listen for the spreadsheetEditorReady event. For more, see Events.

Next steps

To explore additional document workflows and features, see:

• Learn about Spreadsheet Editor
• View spreadsheets
• Edit spreadsheets
• Search and replace text in spreadsheets
• Demo Spreadsheet Editor
• Explore Spreadsheet Editor capabilities
• Build a React Spreadsheet Editor (blog)