Compare Files Showcase Demo Code Sample

1/* ES6 Compliant Syntax */
2/* GitHub Copilot Chat v0.22.4, GPT-4o model, July 22, 2025 */
3/* File: index.js */
4
5import WebViewer from '@pdftron/webviewer';
6
7// File Compare section
8// 
9// Code to customize the WebViewer to use PDFNet for file comparison,
10// The two files are loaded and compared visually, the differences are 
11// highlighted in a new document which is then displayed in the viewer
12// 
13
14const defaultDoc1 = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/houseplan-A.pdf';
15const defaultDoc2 = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/houseplan-B.pdf';
16
17let error1 = '';
18let error2 = '';
19let file1 = null;
20let file2 = null;
21let title1 = '';
22let title2 = '';
23
24const customizeUI = async (instance) => {
25
26    // Load the default files for comparison
27    // Default file 1
28    try {
29        file1 = await instance.Core.createDocument(defaultDoc1);
30        title1 = file1.getFilename() || 'File 1';
31    } catch (err) {
32        error1 = 'Error loading File 1: ' + err.message;
33        console.error(error1);
34        throw err;
35    }
36
37    // Default file 2
38    try {
39        file2 = await instance.Core.createDocument(defaultDoc2);
40        title2 = file2.getFilename() || 'File 2';
41    } catch (err) {
42        error2 = 'Error loading File 2: ' + err.message;
43        console.error(error2);
44        throw err;
45    }
46
47    // Run the visual comparison
48    await compare(instance);
49}
50
51// Function to compare two PDF documents
52// This function uses PDFNet to create a visual difference comparison
53// The resulting document highlights the differences and is displayed in the viewer
54const compare = async (instance) => {
55    if (!file1 || !file2) {
56        console.error('Files are not loaded properly.');
57        return;
58    }
59
60    // Initialize PDFNet
61    const { PDFNet } = instance.Core;
62    await PDFNet.initialize();
63
64    // Create a new PDFDoc for each loaded Document
65    const [PDFDoc1, PDFDoc2] = await Promise.all([
66        file1.getPDFDoc(),
67        file2.getPDFDoc()
68    ]);
69
70    // Helper function to get all pages from a PDFDoc
71    const getPageArray = async (PDFDoc) => {
72        const pageArray = [];
73        const pageIterator = await PDFDoc.getPageIterator();
74
75        for (pageIterator; await pageIterator.hasNext(); pageIterator.next()) {
76            const page = await pageIterator.current();
77            pageArray.push(page);
78        }
79        return pageArray;
80    }
81
82    // Get all pages from both documents
83    const [doc1Pages, doc2Pages] = await Promise.all([
84        getPageArray(PDFDoc1),
85        getPageArray(PDFDoc2)
86    ]);
87    console.log(doc1Pages, doc2Pages);
88
89    // Create a new PDFDoc to hold the visual difference comparison
90    const comparisonDoc = await PDFNet.PDFDoc.create();
91    comparisonDoc.lock();
92
93    // Check for mismatched page counts
94    const biggestLength = Math.max(doc1Pages.length, doc2Pages.length);
95
96    // Add a blank page if one document has fewer pages
97    for (let i = 0; i < biggestLength; i++) {
98        let page1 = doc1Pages[i];
99        let page2 = doc2Pages[i];
100
101        if (!page1) {
102            page1 = await PDFDoc1.pageCreate();
103        }
104        if (!page2) {
105            page2 = await PDFDoc2.pageCreate();
106        }
107
108        // Append the page with highlighted differences to the comparison document
109        await comparisonDoc.appendVisualDiff(page1, page2);
110    }
111    comparisonDoc.unlock();
112
113    // Load the comparison document into the viewer
114    instance.UI.loadDocument(comparisonDoc);
115}
116
117// WebViewer section
118// 
119// This code initializes the WebViewer with the basic settings
120// that are found in the default showcase WebViewer
121//
122
123const searchParams = new URLSearchParams(window.location.search);
124const history = window.history || window.parent.history || window.top.history;
125const licenseKey = 'YOUR_LICENSE_KEY_HERE'; 
126const element = document.getElementById('viewer');
127
128// Initialize WebViewer with the specified settings
129WebViewer({
130    path: '/lib',
131    serverUrl: null,
132    forceClientSideInit: true,
133    fullAPI: true,
134    css: '../styles/stylesheet.css',
135    ui: 'beta',
136    licenseKey: licenseKey,
137}, element).then((instance) => {
138    // Enable the measurement toolbar so it appears with all the other tools, and disable Cloudy rectangular tool
139    const cloudyTools = [
140        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT,
141        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT2,
142        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT3,
143        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT4,
144    ];
145    instance.UI.enableFeatures([instance.UI.Feature.Measurement, instance.UI.Feature.Initials]);
146    instance.UI.disableTools(cloudyTools);
147
148    // Set default toolbar group to Annotate
149    instance.UI.setToolbarGroup('toolbarGroup-Annotate');
150
151    // Set default tool on mobile devices to Pan.
152    // https://apryse.atlassian.net/browse/WVR-3134
153    if (isMobileDevice()) {
154        instance.UI.setToolMode(instance.Core.Tools.ToolNames.PAN);
155    }
156
157    instance.Core.documentViewer.addEventListener('documentUnloaded', () => {
158        if (searchParams.has('file')) {
159            searchParams.delete('file');
160            history.replaceState(null, '', '?' + searchParams.toString());
161        }
162    });
163
164    instance.Core.annotationManager.enableAnnotationNumbering();
165
166    instance.UI.NotesPanel.enableAttachmentPreview();
167
168    // Add the demo-specific functionality
169    customizeUI(instance).then(() => {
170        // Create UI controls after demo is initialized
171        createUIControls(instance);
172    });
173});
174
175// Function to check if the user is on a mobile device
176const isMobileDevice = () => {
177    return (
178        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
179            window.navigator.userAgent
180        ) ||
181        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
182            window.navigator.userAgent.substring(0, 4)
183        )
184    );
185}
186
187// Cleanup function for when the demo is closed or page is unloaded
188const cleanup = (instance) => {
189    if (typeof instance !== 'undefined' && instance.UI) {
190        // Clean up any resources if needed
191        console.log('Cleaning up compare-files demo');
192    }
193};
194
195// Register cleanup for page unload
196window.addEventListener('beforeunload', () => cleanup());
197window.addEventListener('unload', () => cleanup());
198
199// UI section
200// 
201// Helper code to add controls to the viewer holding the buttons
202// This code creates a container for the buttons, styles them, and adds them to the viewer
203//
204
205// File Picker Component - Reusable component for both files
206const createFilePicker = (instance, fileConfig) => {
207    const {
208        fileNumber,
209        labelText,
210        getColor,
211        titleVar,
212        errorVar,
213        setFile,
214        setTitle,
215        setError
216    } = fileConfig;
217
218    // Create the wrapper and container elements
219    const wrapper = document.createElement('div');
220    wrapper.className = 'file-wrapper';
221    const container = document.createElement('div');
222    container.className = 'file-container';
223
224    // Error message
225    const error = document.createElement('p');
226    error.className = 'error-message';
227    error.textContent = errorVar;
228
229    // Selected file text
230    const selectedFile = document.createElement('p');
231    selectedFile.textContent = titleVar || 'No file selected';
232
233    // Label for the file
234    const label = document.createElement('div');
235    label.className = 'file-label';
236
237    // Create a block showing the color used to highlight differences
238    const diffOptions = new instance.Core.PDFNet.PDFDoc.DiffOptions();
239    const color = getColor(diffOptions);
240    const colorBlock = document.createElement('span');
241    colorBlock.className = 'color-block';
242    colorBlock.style.backgroundColor = `rgba(${color.R}, ${color.G}, ${color.B}, ${color.A})`;
243
244    // Text for the label
245    const text = document.createElement('span');
246    text.className = 'file-label-text';
247    text.textContent = labelText;
248
249    label.appendChild(colorBlock);
250    label.appendChild(text);
251
252    // Button to select the file
253    const button = document.createElement('button');
254    button.className = 'btn-filepicker with-margin';
255    button.textContent = 'Select File';
256    button.onclick = () => {
257        const input = document.createElement('input');
258        input.type = 'file';
259        input.accept = '.pdf';
260        input.onchange = async (event) => {
261            const file = event.target.files[0];
262            if (file) {
263                try {
264                    const doc = await instance.Core.createDocument(file);
265                    setFile(doc);
266                    const newTitle = file.name || `File ${fileNumber}`;
267                    setTitle(newTitle);
268                    selectedFile.textContent = newTitle;
269                    error.textContent = ''; // Clear any previous errors
270                    console.log(`File ${fileNumber} selected:`, newTitle);
271                } catch (err) {
272                    const errorMessage = `Error loading File ${fileNumber}: ${err.message}`;
273                    setError(errorMessage);
274                    error.textContent = errorMessage;
275                    console.error(errorMessage);
276                }
277            }
278        };
279        input.onerror = (err) => {
280            const errorMessage = `Error selecting File ${fileNumber}: ${err.message}`;
281            setError(errorMessage);
282            error.textContent = errorMessage;
283            console.error(errorMessage);
284        };
285        input.click();
286    };
287
288    container.appendChild(label);
289    container.appendChild(button);
290    container.appendChild(error);
291    container.appendChild(selectedFile);
292
293    wrapper.appendChild(container);
294    return wrapper;
295};
296
297// First File Button
298const firstFile = (instance) => {
299    return createFilePicker(instance, {
300        fileNumber: 1,
301        labelText: 'First File',
302        getColor: (diffOptions) => diffOptions.getColorA(),
303        titleVar: title1,
304        errorVar: error1,
305        setFile: (doc) => { file1 = doc; },
306        setTitle: (title) => { title1 = title; },
307        setError: (error) => { error1 = error; }
308    });
309};
310
311// Second File Button
312const secondFile = (instance) => {
313    return createFilePicker(instance, {
314        fileNumber: 2,
315        labelText: 'Second File',
316        getColor: (diffOptions) => diffOptions.getColorB(),
317        titleVar: title2,
318        errorVar: error2,
319        setFile: (doc) => { file2 = doc; },
320        setTitle: (title) => { title2 = title; },
321        setError: (error) => { error2 = error; }
322    });
323};
324
325// Compare button
326const compareButton = (instance) => {
327    const button = document.createElement('button');
328    button.className = 'btn-compare bottom-margin';
329    button.textContent = 'Compare Files';
330    button.onclick = async () => {
331        if (!file1 || !file2) {
332            console.error('Files are not selected.');
333            return;
334        }
335        await compare(instance);
336    };
337    return button;
338};
339
340const createUIControls = (instance) => {
341    // Create a container for all controls (label, dropdown, and buttons)
342    const controlsContainer = document.createElement('div');
343    controlsContainer.className = 'button-container';
344
345    controlsContainer.appendChild(firstFile(instance));
346    controlsContainer.appendChild(secondFile(instance));
347    controlsContainer.appendChild(compareButton(instance));
348
349    element.insertBefore(controlsContainer, element.firstChild);
350};