PDF to Image Showcase Demo Code Sample

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