Skip to content
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)