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