Compare PDF files

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

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

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: 'Your PDF Url',
  licenseKey: 'Input your license here'
}, viewer)
.then((instance) => {
  const { documentViewer } = instance.Core;
  documentViewer.addEventListener('documentLoaded', async () => {
    console.log('ComPDFKit Web Demo loaded');

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

async function DocumentCompare ({ createDocument }) {
  // 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 oldDocument = await createDocument(documentAFile); // Old file.
  const newDocument = await createDocument(documentBFile); // New file.

  // Overlay comparison. Use oldDocument.compareContent(newDocument) for content comparison.
  const result = await oldDocument.compareDrawings(newDocument, {
    baseAlpha: 0.5, // The transparency of the old file.
    otherAlpha: 0.5, // The transparency of of the new file.
    blendMode: 'normal', // Blend Modes, such as 'normal', 'multiply', 'screen', 'colorDodge', 'luminosity'.
    colors: {
      base: '#FBBDBF', // The color of the old file.
      other: '#93B9FD' // The color of of the new file.
    }
  });

  // Get the blob object of the comparison result.
  const res = new Blob([await result.getFileData()], { type: 'application/pdf' });
  return res;
}