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;
}