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