Skip to content
Guides

Compare PDF files

The provided samples demonstrate two methods for comparing documents: Overlay Comparison and Content Comparison.

javascript
// Import the JS file of ComPDFKit Web Demo.
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo loaded');

    // Sample: Compare documents
    if (DocumentCompare(docViewer)) {
      console.log('Compare document done.');
    } else {
      console.log('Compare document failed.');
    }
  })
})

async function DocumentCompare (docViewer) {
  // Get the file stream of the compared files.
  const documentA = await fetch('https://example.com/documentA.pdf');
  const documentABlob = await documentA.blob();
  const documentAFile = new File([documentABlob], 'documentA.pdf');
  const documentB = await fetch('https://example.com/documentB.pdf');
  const documentBBlob = await documentB.blob();
  const documentBFile = new File([documentBBlob], 'documentB.pdf');

  const data = {
    leftFile: documentAFile, // Old file.
    rightFile: documentBFile, // New file.
    type: 2, // The type of document comparison.
    inTransparency: '50', // The transparency of the old file.
    newTransparency: '50', // The transparency of of the new file.
    coverType: '0', // Blend Modes.
    inColor: '#FBBDBF', // The color of the old file.
    newColor: '#93B9FD' // The color of of the new file.
  };

  // Get object containing document blob object of the comparison result.
  const res = await docViewer.compare(data);
  return res;
}