Spreadsheet Editor Overview

Spreadsheet Editor is part of the Apryse Web SDK’s Office editing suite, offering client-side access and viewing of XLSX files with a familiar, Excel-like interface. Used alongside the DOCX Editor and WebViewer’s PDF editing tools, it completes a full set of in-app document editing capabilities for developers. Spreadsheet Editor integrates easily into any JavaScript framework like React, Angular, Vue, Nuxt.js, or Next.js using a simple DOM element to host the component. It preserves the structure and integrity of template-based, compliance-intensive, and formula-driven content.

To enable Spreadsheet Editor, you can pass the initialMode parameter in WebViewer’s constructor options. The following will load a new empty spreadsheet:

1WebViewer.Iframe({
2  path: '/lib',
3  initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
4}, document.getElementById('viewer')).then(instance => {
5    // Implement your own solution
6});

To load a existing document initially, you can pass the initialDoc :

1WebViewer.Iframe({
2  initialDoc: './sample.xlsx',
3  path: '/lib',
4  initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
5}, document.getElementById('viewer')).then(instance => {
6    // Implment your own resolution
7});

To load a spreadsheet programatically when already in Spreadsheet Editor, you can use UI.loadDocument :

1WebViewer.getInstance().UI.loadDocument('...file path or blob');

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

1WebViewer.getInstance().UI.loadDocument('...file path or blob', {
2    initialMode: WebViewer.Modes.SPREADSHEET_EDITOR
3});

Another option is to use Core.documentViewer.loadDocument. Make sure to pass enableOfficeEditing: true as the parameter in the options.The file URI requires the correct file extension .xlsx.

1WebViewer.getInstance().Core.documentViewer.loadDocument('...file path', {
2    enableOfficeEditing: true
3});

If you are passing in a blob, make sure to pass the extension option as xlsx:

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

If you started the viewer in Spreadsheet Editor mode, and load a file an XLSX file using the UI's file picker, it will always load it in Spreadsheet Editor mode.

By default, Spreadsheet Editor will be enabled in view mode, which allows user to navigate spreadsheets using a familiar grid interface, view calculated cells and formulas, and change workbook sheets without making unexpected changes

You can check the Spreadsheet Editor mode with:

1const { documentViewer } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3const spreadsheetMode = spreadsheetEditorManager.getEditMode();
4console.log(spreadsheetMode); // Should print 'viewOnly'

When in view mode, you can use the following two events to access the information needed:
(1) SelectionChangedEvent: Triggered when selecting cells in a sheet

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3spreadsheetEditorManager.addEventListener(
4    SpreadsheetEditor.SpreadsheetEditorManager.Events.SELECTION_CHANGED, 
5    (e) => console.log(e) // SelectionChangedEvent class
6);
7

(2) ActiveSheetChangedEvent: Triggered when switching to another sheet

1const { documentViewer, SpreadsheetEditor } = WebViewer.getInstance().Core;
2const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
3spreadsheetEditorManager.addEventListener(
4    SpreadsheetEditor.SpreadsheetEditorManager.Events.ACTIVE_SHEET_CHANGED, 
5    (e) => console.log(e) // ActiveSheetChangedEvent class
6);