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