1// ES6 Compliant Syntax
2// GitHub Copilot v1, Claude Sonnet 3.5, 2025-07-31
3// File: showcase-demos/office-editor/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7// List of sample DOCX files
8 const docxFiles = [
9 'https://pdftron.s3.amazonaws.com/downloads/pl/legal-contract.docx',
10 'https://pdftron.s3.amazonaws.com/downloads/pl/Cover_Letter_Word.docx',
11 'https://pdftron.s3.amazonaws.com/downloads/pl/report.docx'
12];
13
14const element = document.getElementById('viewer');
15let theInstance = null;
16const onLoad = async (instance) => {
17 theInstance = instance;
18 instance.Core.documentViewer.addEventListener('documentLoaded', () => {
19 // here you can get the document and perform actions on it,
20 const fileName = theInstance.Core.documentViewer.getDocument().getFilename();
21 const fileExtension = fileName.substring(fileName.lastIndexOf('.'))
22 if(fileExtension !== '.docx' && fileExtension !== '.doc') {
23 alert('Document loaded, but it is not a DOC/DOCX file.');
24 }
25 });
26};
27
28// Initialize WebViewer with the first DOCX file and enable Office editing
29WebViewer(
30 {
31 path: '/lib',
32 licenseKey: 'YOUR_LICENSE_KEY',
33 initialDoc: docxFiles[0], // Default to the first file in the list
34 enableOfficeEditing: true,
35 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
36 },
37 element
38).then((instance) => {
39 onLoad(instance);
40});
41
42// Create a dropdown for files
43const docxFileSelect = document.createElement('select');
44
45// Populate the dropdown with options
46docxFiles.forEach(file => {
47 const option = document.createElement('option');
48 option.value = file; // Use the full URL as the value
49 option.textContent = file.substring(file.lastIndexOf('/') + 1); // Display only the file name
50 docxFileSelect.appendChild(option);
51});
52
53// set default value for the dropdown
54docxFileSelect.value = docxFiles[0]; // Default to first file
55docxFileSelect.onchange = () => {
56 // When the selected file changes, load the new document
57 theInstance.UI.loadDocument(docxFileSelect.options[docxFileSelect.selectedIndex].value);
58};
59const filesLabel = document.createElement('label');
60filesLabel.textContent = 'Choose a file to edit: ';
61const uploadLabel = document.createElement('label');
62uploadLabel.textContent = 'Or use the Open File command in the WebViewer UI menu to upload a DOCX file';
63
64// UI section
65//
66// Helper code to add controls to the viewer holding the buttons and dropdown
67
68// Create a container for all controls (label, dropdown, and buttons)
69const controlsContainer = document.createElement('div');
70
71// Apply classes for styling using CSS
72filesLabel.className = 'label-class';
73docxFileSelect.className = 'file-select';
74controlsContainer.className = 'control-container';
75
76// Append elements to the controls container
77controlsContainer.appendChild(filesLabel);
78controlsContainer.appendChild(docxFileSelect);
79controlsContainer.appendChild(uploadLabel)
80element.insertBefore(controlsContainer, element.firstChild);
81