Compare Files Showcase Demo Sample Code

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKPackage: CompareFull APILive demo

Easily compare two files by converting them to images and laying them on top of each other for a pixel-by-pixel comparison.

This demo allows you to:

• Choose your own PDF files to compare

• Display the differences

• Customize compliance checks

• Download a PDF with differences highlighted

The full API is enabled by passing the fullAPI option into the WebViewer constructor. This is already included in your sample code below.

Implementation steps

To add PDF comparison capability with WebViewer: Step 1: Get started with your preferred web stack for WebViewer Step 2: Add the ES6 JavaScript sample code provided in this guide

Once you generate your license key, it will automatically be included in your sample code below.

/* ES6 Compliant Syntax */
/* GitHub Copilot Chat v0.22.4, GPT-4o model, July 22, 2025 */
/* File: index.js */

import WebViewer from '@pdftron/webviewer';

// File Compare section
// 
// Code to customize the WebViewer to use PDFNet for file comparison,
// The two files are loaded and compared visually, the differences are 
// highlighted in a new document which is then displayed in the viewer
// 

const defaultDoc1 = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/houseplan-A.pdf';
const defaultDoc2 = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/houseplan-B.pdf';

let error1 = '';
let error2 = '';
let file1 = null;
let file2 = null;
let title1 = '';
let title2 = '';

const customizeUI = async (instance) => {

    // Load the default files for comparison
    // Default file 1
    try {
        file1 = await instance.Core.createDocument(defaultDoc1);
        title1 = file1.getFilename() || 'File 1';
    } catch (err) {
        error1 = 'Error loading File 1: ' + err.message;
        console.error(error1);
        throw err;
    }

    // Default file 2
    try {
        file2 = await instance.Core.createDocument(defaultDoc2);
        title2 = file2.getFilename() || 'File 2';
    } catch (err) {
        error2 = 'Error loading File 2: ' + err.message;
        console.error(error2);
        throw err;
    }

    // Run the visual comparison
    await compare(instance);
}

// Function to compare two PDF documents
// This function uses PDFNet to create a visual difference comparison
// The resulting document highlights the differences and is displayed in the viewer
const compare = async (instance) => {
    if (!file1 || !file2) {
        console.error('Files are not loaded properly.');
        return;
    }

    // Initialize PDFNet
    const { PDFNet } = instance.Core;
    await PDFNet.initialize();

    // Create a new PDFDoc for each loaded Document
    const [PDFDoc1, PDFDoc2] = await Promise.all([
        file1.getPDFDoc(),
        file2.getPDFDoc()
    ]);

    // Helper function to get all pages from a PDFDoc
    const getPageArray = async (PDFDoc) => {
        const pageArray = [];
        const pageIterator = await PDFDoc.getPageIterator();

        for (pageIterator; await pageIterator.hasNext(); pageIterator.next()) {
            const page = await pageIterator.current();
            pageArray.push(page);
        }
        return pageArray;
    }

    // Get all pages from both documents
    const [doc1Pages, doc2Pages] = await Promise.all([
        getPageArray(PDFDoc1),
        getPageArray(PDFDoc2)
    ]);
    console.log(doc1Pages, doc2Pages);

    // Create a new PDFDoc to hold the visual difference comparison
    const comparisonDoc = await PDFNet.PDFDoc.create();
    comparisonDoc.lock();

    // Check for mismatched page counts
    const biggestLength = Math.max(doc1Pages.length, doc2Pages.length);

    // Add a blank page if one document has fewer pages
    for (let i = 0; i < biggestLength; i++) {
        let page1 = doc1Pages[i];
        let page2 = doc2Pages[i];

        if (!page1) {
            page1 = await PDFDoc1.pageCreate();
        }
        if (!page2) {
            page2 = await PDFDoc2.pageCreate();
        }

        // Append the page with highlighted differences to the comparison document
        await comparisonDoc.appendVisualDiff(page1, page2);
    }
    comparisonDoc.unlock();

    // Load the comparison document into the viewer
    instance.UI.loadDocument(comparisonDoc);
}

// WebViewer section
// 
// This code initializes the WebViewer with the basic settings
// that are found in the default showcase WebViewer
//

const searchParams = new URLSearchParams(window.location.search);
const history = window.history || window.parent.history || window.top.history;
const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY'; 
const element = document.getElementById('viewer');

// Initialize WebViewer with the specified settings
WebViewer({
    path: '/lib',
    licenseKey: licenseKey,
    fullAPI: true, // Required for PDFNet features
}, element).then((instance) => {
    // Enable the measurement toolbar so it appears with all the other tools, and disable Cloudy rectangular tool
    const cloudyTools = [
        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT,
        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT2,
        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT3,
        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT4,
    ];
    instance.UI.enableFeatures([instance.UI.Feature.Measurement, instance.UI.Feature.Initials]);
    instance.UI.disableTools(cloudyTools);

    // Set default toolbar group to Annotate
    instance.UI.setToolbarGroup('toolbarGroup-Annotate');

    // Set default tool on mobile devices to Pan.
    // https://apryse.atlassian.net/browse/WVR-3134
    if (isMobileDevice()) {
        instance.UI.setToolMode(instance.Core.Tools.ToolNames.PAN);
    }

    instance.Core.documentViewer.addEventListener('documentUnloaded', () => {
        if (searchParams.has('file')) {
            searchParams.delete('file');
            history.replaceState(null, '', '?' + searchParams.toString());
        }
    });

    instance.Core.annotationManager.enableAnnotationNumbering();

    instance.UI.NotesPanel.enableAttachmentPreview();

    // Add the demo-specific functionality
    customizeUI(instance).then(() => {
        // Create UI controls after demo is initialized
        createUIControls(instance);
    });
});

// Function to check if the user is on a mobile device
const isMobileDevice = () => {
    return (
        /(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(
            window.navigator.userAgent
        ) ||
        /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(
            window.navigator.userAgent.substring(0, 4)
        )
    );
}

// Cleanup function for when the demo is closed or page is unloaded
const cleanup = (instance) => {
    if (typeof instance !== 'undefined' && instance.UI) {
        // Clean up any resources if needed
        console.log('Cleaning up compare-files demo');
    }
};

// Register cleanup for page unload
window.addEventListener('beforeunload', () => cleanup());
window.addEventListener('unload', () => cleanup());

// UI section
// 
// Helper code to add controls to the viewer holding the buttons
// This code creates a container for the buttons, styles them, and adds them to the viewer
//

// File Picker Component - Reusable component for both files
const createFilePicker = (instance, fileConfig) => {
    const {
        fileNumber,
        labelText,
        getColor,
        titleVar,
        errorVar,
        setFile,
        setTitle,
        setError
    } = fileConfig;

    // Create the wrapper and container elements
    const wrapper = document.createElement('div');
    wrapper.className = 'file-wrapper';
    const container = document.createElement('div');
    container.className = 'file-container';

    // Error message
    const error = document.createElement('p');
    error.className = 'error-message';
    error.textContent = errorVar;

    // Selected file text
    const selectedFile = document.createElement('p');
    selectedFile.textContent = titleVar || 'No file selected';

    // Label for the file
    const label = document.createElement('div');
    label.className = 'file-label';

    // Create a block showing the color used to highlight differences
    const diffOptions = new instance.Core.PDFNet.PDFDoc.DiffOptions();
    const color = getColor(diffOptions);
    const colorBlock = document.createElement('span');
    colorBlock.className = 'color-block';
    colorBlock.style.backgroundColor = `rgba(${color.R}, ${color.G}, ${color.B}, ${color.A})`;

    // Text for the label
    const text = document.createElement('span');
    text.className = 'file-label-text';
    text.textContent = labelText;

    label.appendChild(colorBlock);
    label.appendChild(text);

    // Button to select the file
    const button = document.createElement('button');
    button.className = 'btn-filepicker with-margin';
    button.textContent = 'Select File';
    button.onclick = () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.pdf';
        input.onchange = async (event) => {
            const file = event.target.files[0];
            if (file) {
                try {
                    const doc = await instance.Core.createDocument(file);
                    setFile(doc);
                    const newTitle = file.name || `File ${fileNumber}`;
                    setTitle(newTitle);
                    selectedFile.textContent = newTitle;
                    error.textContent = ''; // Clear any previous errors
                    console.log(`File ${fileNumber} selected:`, newTitle);
                } catch (err) {
                    const errorMessage = `Error loading File ${fileNumber}: ${err.message}`;
                    setError(errorMessage);
                    error.textContent = errorMessage;
                    console.error(errorMessage);
                }
            }
        };
        input.onerror = (err) => {
            const errorMessage = `Error selecting File ${fileNumber}: ${err.message}`;
            setError(errorMessage);
            error.textContent = errorMessage;
            console.error(errorMessage);
        };
        input.click();
    };

    container.appendChild(label);
    container.appendChild(button);
    container.appendChild(error);
    container.appendChild(selectedFile);

    wrapper.appendChild(container);
    return wrapper;
};

// First File Button
const firstFile = (instance) => {
    return createFilePicker(instance, {
        fileNumber: 1,
        labelText: 'First File',
        getColor: (diffOptions) => diffOptions.getColorA(),
        titleVar: title1,
        errorVar: error1,
        setFile: (doc) => { file1 = doc; },
        setTitle: (title) => { title1 = title; },
        setError: (error) => { error1 = error; }
    });
};

// Second File Button
const secondFile = (instance) => {
    return createFilePicker(instance, {
        fileNumber: 2,
        labelText: 'Second File',
        getColor: (diffOptions) => diffOptions.getColorB(),
        titleVar: title2,
        errorVar: error2,
        setFile: (doc) => { file2 = doc; },
        setTitle: (title) => { title2 = title; },
        setError: (error) => { error2 = error; }
    });
};

// Compare button
const compareButton = (instance) => {
    const button = document.createElement('button');
    button.className = 'btn-compare bottom-margin';
    button.textContent = 'Compare Files';
    button.onclick = async () => {
        if (!file1 || !file2) {
            console.error('Files are not selected.');
            return;
        }
        await compare(instance);
    };
    return button;
};

const createUIControls = (instance) => {
    // Create a container for all controls (label, dropdown, and buttons)
    const controlsContainer = document.createElement('div');
    controlsContainer.className = 'button-container';

    controlsContainer.appendChild(firstFile(instance));
    controlsContainer.appendChild(secondFile(instance));
    controlsContainer.appendChild(compareButton(instance));

    element.insertBefore(controlsContainer, element.firstChild);
};

View the full sample on GitHub