Section:

Spreadsheet Editor - Basic Setup

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.

Spreadsheet Editor must be purchased as an add-on to your Web SDK subscription.

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

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});

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, () => {
8      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