// ES6 Compliant Syntax
// GitHub Copilot v1, Claude Sonnet 4 (Preview), 2025-09-15
// File: showcase-demos/spreadsheet-editor/index.js
import WebViewer from '@pdftron/webviewer';
const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
// Custom File class to hold file metadata (not to be confused with browser's File API)
class FileMetadata {
constructor(options) {
this.name = options.name;
this.displayName = options.displayName;
this.path = options.path;
this.extension = options.extension;
this.displayExtension = options.displayExtension;
this.id = options.id;
}
}
const files = {
ANNUAL_FINANCIAL_REPORT: new FileMetadata({
name: 'annual_financial_report.xlsx',
displayName: 'Annual Financial Report (xlsx)',
path: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/annual_financial_report.xlsx',
extension: 'xlsx',
id: 82,
}),
INVOICE_TEMPLATE: new FileMetadata({
name: 'invoice_template.xlsx',
displayName: 'Invoice Template (xlsx)',
path: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/invoice_template.xlsx',
extension: 'xlsx',
displayExtension: 'xlsx',
id: 48,
}),
XLSX_5000_ROWS: new FileMetadata({
name: 'file_5000_rows.xlsx',
displayName: 'File with 5000 rows (xlsx)',
path: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/file_5000_rows.xlsx',
extension: 'xlsx',
id: 83,
}),
}
const sampleDocuments = [
files.ANNUAL_FINANCIAL_REPORT,
files.INVOICE_TEMPLATE,
files.XLSX_5000_ROWS,
];
const defaultFile = sampleDocuments[0].path;
// Function to initialize and load the Spreadsheet Editor
function loadSpreadsheetEditor() {
const element = document.getElementById('viewer');
if (!element) {
console.error('Viewer div not found.');
return;
}
WebViewer.Iframe({
path: '/lib',
licenseKey: licenseKey,
initialDoc: defaultFile,
enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
initialMode: WebViewer.Modes.SPREADSHEET_EDITOR,
}, element).then(instance => {
const { documentViewer, SpreadsheetEditor } = instance.Core;
const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();
const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
// Ensure the Spreadsheet Editor Manager is ready and set to editing mode
spreadsheetEditorManager.addEventListener(
SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY,
() => {
spreadsheetEditorManager.setEditMode(
SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING
);
},
{ once: true }
);
});
// UI section
//
// Create a container for all controls (label, dropdown, and buttons)
const controlsContainer = document.createElement('div');
controlsContainer.className = 'control-container';
controlsContainer.id = 'gallery-container';
element.insertBefore(controlsContainer, element.firstChild);
const filesArray = [
{ name: sampleDocuments[0].displayName, thumbnail: '/showcase-demos/spreadsheet-editor/annual_financial_report.png', url: sampleDocuments[0].path },
{ name: sampleDocuments[1].displayName, thumbnail: '/showcase-demos/spreadsheet-editor/invoice_template.png', url: sampleDocuments[1].path },
{ name: sampleDocuments[2].displayName, thumbnail: '/showcase-demos/spreadsheet-editor/file_5000_rows.png', url: sampleDocuments[2].path }
]
//
console.log('gallery-picker.js loaded, GalleryPicker:', window.GalleryPicker);
// Dynamically load gallery-picker.js if not already loaded
if (!window.GalleryPicker) {
const script = document.createElement('script');
script.src = '/showcase-demos/spreadsheet-editor/gallery-picker.js';
script.onload = function () {
console.log('Safe to use GalleryPicker here');
GalleryPicker.init('gallery-container', filesArray, (file) => {
console.log('Selected file:', file);
WebViewer.getInstance().UI.loadDocument(file.url, { filename: file.name, extension: file.extension });
});
console.log('GalleryPicker.init', GalleryPicker.init);
};
document.head.appendChild(script);
}
if (window.GalleryPicker) {
element.insertBefore(controlsContainer, element.firstChild);
}
}
loadSpreadsheetEditor();
