1// ES6 Compliant Syntax
2// GitHub Copilot, Version: 1.0, Model: GPT-4, Date: 2024-06-09
3// File: office-to-pdf/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9const element = document.getElementById('viewer');
10let theInstance = null;
11const onLoad = async (instance) => {
12 theInstance = instance;
13};
14
15// default document to load
16const defaultDoc = 'legal-contract';
17
18WebViewer(
19 {
20 path: '/lib',
21 licenseKey: licenseKey,
22 initialDoc: `https://pdftron.s3.amazonaws.com/downloads/pl/${defaultDoc}.docx`
23 },
24 element
25).then((instance) => {
26 onLoad(instance);
27});
28
29// Define the target file name for download
30let targetFile = `${defaultDoc}.pdf`;
31
32// List of supported Office file formats
33const officeExtensions = [
34 'doc',
35 'docx',
36 'docm',
37 'dotx',
38 'dotm',
39 'dot',
40 'xlsx',
41 'xlsm',
42 'xlt',
43 'xls',
44 'pptx',
45 'ppt',
46 'pptm',
47 'pps',
48 'pot',
49];
50
51// Create a button to upload Office documents
52const buttonUpload = document.createElement('button');
53buttonUpload.textContent = 'Upload Office Document';
54buttonUpload.onclick = async () => {
55 fileUpload.click();
56};
57
58// Create a file input for uploading Office documents
59// This input is hidden and will be triggered by the Upload button
60const acceptedFormats = officeExtensions.map(ext => `.${ext}`).join(',');
61const fileUpload = document.createElement('input');
62fileUpload.style.display = 'none';
63fileUpload.type = 'file';
64fileUpload.accept = acceptedFormats;
65fileUpload.onchange = (event) => {
66 const file = event.target.files[0];
67 if (file) {
68 const reader = new FileReader();
69 reader.onload = () => {
70 theInstance.UI.loadDocument(reader.result, {filename: file.name});
71 };
72 reader.readAsArrayBuffer(file);
73 // Update target PDF file name for download to match the uploaded Office document name
74 targetFile = file.name.substring(0, file.name.lastIndexOf('.')) + '.pdf';
75 buttonDownload.textContent = 'Download ' + targetFile;
76 }
77};
78
79// Function to convert to PDF and download the resulting document
80async function downloadPdf() {
81 const doc =theInstance.Core.documentViewer.getDocument();
82
83 const data = await doc.getFileData({
84 downloadType: 'pdf',
85 });
86 const arr = new Uint8Array(data);
87 const pdfBlob = new Blob([arr], { type: 'application/pdf' });
88
89 const url = URL.createObjectURL(pdfBlob);
90 const link = document.createElement('a');
91 link.href = url;
92 link.download = targetFile;
93 link.click();
94};
95
96// Create a button to download the converted PDF
97const buttonDownload = document.createElement('button');
98buttonDownload.textContent = 'Download ' + targetFile;
99buttonDownload.onclick = async () => {
100 downloadPdf();
101};
102
103// Label for list of supported Office document formats
104const labelFormats = document.createElement('label');
105const formats = officeExtensions.map(ext => `${ext.toUpperCase()}`).join(', ');
106labelFormats.textContent = `Office Formats: ${formats}`;
107
108// UI section
109//
110// Helper code to add controls to the viewer holding the buttons and dropdown
111// This code creates a container for the buttons and dropdown, styles them, and adds them to the viewer
112
113
114// Create a container for all controls (label, dropdown, and buttons)
115const controlsContainer = document.createElement('div');
116
117buttonDownload.className = 'btn-style';
118buttonUpload.className = 'btn-style';
119
120labelFormats.className = 'formats-label';
121
122controlsContainer.className = 'button-container';
123controlsContainer.appendChild(labelFormats);
124controlsContainer.appendChild(document.createElement('br'));
125controlsContainer.appendChild(fileUpload);
126controlsContainer.appendChild(buttonUpload);
127controlsContainer.appendChild(buttonDownload);
128element.insertBefore(controlsContainer, element.firstChild);