1// ES6 Compliant Syntax
2// GitHub Copilot v1, Claude Sonnet 3.5, 2025-07-31
3// File: pdf-to-image/index.js
4
5import WebViewer from '@pdftron/webviewer';
6import { saveAs } from 'file-saver';
7
8// List of supported image formats
9 const imageFormats = [ 'jpeg', 'png'];
10
11const element = document.getElementById('viewer');
12let theInstance = null;
13const onLoad = async (instance) => {
14 theInstance = instance;
15 instance.Core.documentViewer.addEventListener('documentLoaded', () => {
16 toDownload = null; // reset download state
17 buttonDownload.style.display = 'none'; // hide download button when uploading new file
18 });
19};
20
21// Initialize WebViewer and load default document
22WebViewer(
23 {
24 path: '/lib',
25 licenseKey: 'YOUR_LICENSE_KEY',
26 initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
27 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
28 },
29 element
30).then((instance) => {
31 onLoad(instance);
32});
33
34let toDownload = null;
35
36const buttonDownload = document.createElement('button');
37buttonDownload.textContent = '';
38buttonDownload.style.display = 'none'; // initially hide the download button
39buttonDownload.onclick = async () => {
40 if (toDownload) {
41 const { blob, newFileName } = toDownload;
42 saveAs(blob, newFileName);
43 }
44};
45
46// Function to convert the current document to an image
47// If the document has more than one page, it will convert the current page only
48const convertToImage = async (format) => {
49 const docViewer = theInstance.Core.documentViewer;
50 const doc = docViewer.getDocument();
51 const oldFileName = doc.getFilename();
52
53 const newFileName = oldFileName.substring(0, oldFileName.lastIndexOf('.')) + '.' + format;
54 console.log('Converting to:', newFileName);
55 const pageNumber = docViewer.getCurrentPage();
56 console.log('Current page:', pageNumber);
57 const zoom = 2; // render at twice the resolution
58
59 doc.loadCanvas({
60 pageNumber,
61 zoom,
62 drawComplete: async (imageCanvas) => {
63 const corePageRotation = (doc.getPageRotation(pageNumber) / 90) % 4;
64 const annManager = docViewer.getAnnotationManager()
65 annManager.setAnnotationCanvasTransform(imageCanvas.getContext('2d'), zoom, corePageRotation);
66
67 // optionally comment out "drawAnnotations" below to exclude annotations
68 await annManager.drawAnnotations(pageNumber, imageCanvas);
69 imageCanvas.toBlob(function (blob) {
70 toDownload = { blob, newFileName };
71 }, 'image/' + format);
72 buttonDownload.style.display = 'inline'; // show download button after conversion
73 buttonDownload.textContent = newFileName + ' ⭳';
74 }
75 });
76}
77
78// Create a button to convert the current document to an image
79const buttonConvert = document.createElement('button');
80buttonConvert.textContent = 'Convert';
81buttonConvert.onclick = async () => {
82 const format = imageFormatSelect.value; // Get the selected image format
83 await convertToImage(format);
84};
85
86// Create a dropdown for image formats
87const imageFormatSelect = document.createElement('select');
88
89// Populate the dropdown with options
90imageFormats.forEach(format => {
91 const option = document.createElement('option');
92 option.value = format; // Use the format as the value
93 option.textContent = format.toUpperCase(); // Display the format in uppercase
94 imageFormatSelect.appendChild(option);
95});
96
97// set default value for the dropdown
98imageFormatSelect.value = imageFormats[0]; // Default to first format
99imageFormatSelect.onchange = () => {
100 // Hide the download button when changing format
101 buttonDownload.style.display = 'none';
102 toDownload = null; // reset download state
103};
104const convertLabel = document.createElement('label');
105convertLabel.textContent = 'Use the Open File command in the WebViewer UI menu to upload a PDF, then select image format: ';
106
107// UI section
108//
109// Helper code to add controls to the viewer holding the buttons and dropdown
110
111// Create a container for all controls (label, dropdown, and buttons)
112const controlsContainer = document.createElement('div');
113
114// Apply classes for styling using CSS
115convertLabel.className = 'label-class';
116buttonConvert.className = 'btn-style';
117buttonDownload.className = 'btn-style';
118imageFormatSelect.className = 'select-style';
119controlsContainer.className = 'control-container';
120
121// Append elements to the controls container
122controlsContainer.appendChild(convertLabel);
123controlsContainer.appendChild(imageFormatSelect);
124controlsContainer.appendChild(buttonConvert);
125controlsContainer.appendChild(buttonDownload);
126element.insertBefore(controlsContainer, element.firstChild);
127