1// ES6 Compliant Syntax
2// GitHub Copilot v1, Claude Sonnet 3.5, 2025-07-31
3// File: office-documents/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9// List of sample Office files
10 const officeFiles = [
11 {
12 displayName: 'Charles Babbage Quote (docx)',
13 downloadPath: 'https://pdftron.s3.amazonaws.com/downloads/pl/Quote_.Word.docx'
14 },
15 {
16 displayName: 'MS Word (doc)',
17 downloadPath: 'https://pdftron.s3.amazonaws.com/downloads/pl/legal-contract.doc'
18 },
19 {
20 displayName: 'Sales Tracker (xlsx)',
21 downloadPath: 'https://pdftron.s3.amazonaws.com/downloads/pl/sales_tracker.xlsx'
22 },
23 {
24 displayName: 'Travel Presentation (pptx)',
25 downloadPath: 'https://pdftron.s3.amazonaws.com/downloads/pl/Travel_Presentation_PP.pptx'
26 }
27];
28
29const element = document.getElementById('viewer');
30let theInstance = null;
31const onLoad = async (instance) => {
32 theInstance = instance;
33 instance.Core.documentViewer.addEventListener('documentLoaded', () => {
34 // here you can get the document and perform actions on it,
35 if(listLoading){ // do nothing here if loading from the list
36 listLoading = false;
37 return;
38 }
39 setDownloadLink(null); // hide download link when uploading a local file
40 if(theInstance.Core.documentViewer.getDocument().getType() !== 'office') {
41 alert('File loaded, but it is not an Office document.');
42 }
43 });
44};
45
46// Initialize WebViewer with the first file in the list
47WebViewer(
48 {
49 path: '/lib',
50 licenseKey: licenseKey,
51 initialDoc: officeFiles[0].downloadPath, // Default to the first file in the list
52 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
53 },
54 element
55).then((instance) => {
56 onLoad(instance);
57});
58
59function setDownloadLink(fileUrl) {
60 if (!fileUrl) {
61 downloadLink.style.display = 'none'; // Hide the link if no file URL is provided
62 return;
63 }
64 downloadLink.style.display = 'inline'; // Show the link if a file URL is provided
65 downloadLink.href = fileUrl;
66 downloadLink.download = fileUrl.substring(fileUrl.lastIndexOf('/') + 1);
67 downloadLink.textContent = `Download ${downloadLink.download}`;
68}
69
70// Create a link to download the current document
71const downloadLink = document.createElement('a');
72setDownloadLink(officeFiles[0].downloadPath); // Set initial download link
73
74// Create a dropdown for files
75const fileSelect = document.createElement('select');
76
77// Populate the dropdown with options
78officeFiles.forEach(file => {
79 const option = document.createElement('option');
80 option.value = file.downloadPath; // Use the full URL as the value
81 option.textContent = file.displayName;
82 fileSelect.appendChild(option);
83});
84
85let listLoading = true; //initial document laoded from list
86
87// set default value for the dropdown
88fileSelect.value = officeFiles[0].downloadPath; // Default to first file
89fileSelect.onchange = () => {
90 listLoading = true; // signal we're loading from list
91 // When the selected file changes, load the new document
92 theInstance.UI.loadDocument(fileSelect.value);
93 setDownloadLink(fileSelect.value); // Update download link
94};
95const filesLabel = document.createElement('label');
96filesLabel.textContent = 'Try these sample Office documents: ';
97const uploadLabel = document.createElement('label');
98uploadLabel.textContent = 'Or upload with Open File command in the WebViewer UI menu';
99
100// UI section
101//
102// Helper code to add controls to the viewer holding the buttons and dropdown
103
104// Create a container for all controls (label, dropdown, and buttons)
105const controlsContainer = document.createElement('div');
106
107// Apply classes for styling using CSS
108filesLabel.className = 'label-class';
109uploadLabel.className = 'label-class';
110fileSelect.className = 'file-select';
111controlsContainer.className = 'control-container';
112downloadLink.className = 'label-class';
113
114// Append elements to the controls container
115controlsContainer.appendChild(filesLabel);
116controlsContainer.appendChild(fileSelect);
117controlsContainer.appendChild(uploadLabel)
118controlsContainer.appendChild(document.createElement('br'));
119controlsContainer.appendChild(downloadLink);
120element.insertBefore(controlsContainer, element.firstChild);
121
122