On this page
Document Comparison
Overlay Comparison
Overlay comparison is to superpose two files and show the differences by different colors. The superimposed part shows the mixed color. You can set the color, transparency, and Blend Mode of the two files. Here are the supported Blend Modes: Normal, Multiply, Screen, Overlay, Darken, Lighten, ColorDodge, ColorBurn, HardLight, SoftLight, Difference, Exclusion, Hue, Saturation, Color, Luminosity.
javascript
// 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 the file stream of the comparison result
const res = await docViewer.compare(data)Content Comparison
Content comparison is often used to quickly find the changes between different PDF versions, and is suitable for files with much text information. The content that can be compared includes text, images, etc.
javascript
// 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: 1, // the type of document comparison
textCompare: true,
imgCompare: true,
replaceColor: '#93B9FD',
insertColor: '#C0FFEC',
deleteColor: '#FBBDBF'
}
// Get an array containing document blob object of the comparison result
const res = await docViewer.compare(data)