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 forceClientSideInit: false,
36 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
37 },
38 element
39).then((instance) => {
40 onLoad(instance);
41});
42
43// Create a dropdown for files
44const docxFileSelect = document.createElement('select');
45
46// Populate the dropdown with options
47docxFiles.forEach(file => {
48 const option = document.createElement('option');
49 option.value = file; // Use the full URL as the value
50 option.textContent = file.substring(file.lastIndexOf('/') + 1); // Display only the file name
51 docxFileSelect.appendChild(option);
52});
53
54// set default value for the dropdown
55docxFileSelect.value = docxFiles[0]; // Default to first file
56docxFileSelect.onchange = () => {
57 // When the selected file changes, load the new document
58 theInstance.UI.loadDocument(docxFileSelect.options[docxFileSelect.selectedIndex].value);
59};
60const filesLabel = document.createElement('label');
61filesLabel.textContent = 'Choose a file to edit: ';
62const uploadLabel = document.createElement('label');
63uploadLabel.textContent = 'Or use the Open File command in the WebViewer UI menu to upload a DOCX file';
64
65// UI section
66//
67// Helper code to add controls to the viewer holding the buttons and dropdown
68
69// Create a container for all controls (label, dropdown, and buttons)
70const controlsContainer = document.createElement('div');
71
72// Apply classes for styling using CSS
73filesLabel.className = 'label-class';
74docxFileSelect.className = 'file-select';
75controlsContainer.className = 'control-container';
76
77// Append elements to the controls container
78controlsContainer.appendChild(filesLabel);
79controlsContainer.appendChild(docxFileSelect);
80controlsContainer.appendChild(uploadLabel)
81element.insertBefore(controlsContainer, element.firstChild);
82