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.

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: 'sample.xlsx', // Optionally pass a URI to an XLSX document
4  initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
5}, document.getElementById('viewer')).then(instance => {
6  
7});

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 UI.loadDocument:

UI.loadDocument

1const filePathOrBlob = '...';
2WebViewer.getInstance().UI.loadDocument(filePathOrBlob, {
3  initialMode: WebViewer.Modes.SPREADSHEET_EDITOR
4});

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

documentViewer.loadDocument with blob xlsx

1const blob = new Blob(...);
2WebViewer.getInstance().Core.documentViewer.loadDocument(blob, {
3    enableOfficeEditing: true,
4    extension: 'xlsx',
5});

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

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales