Foxit PDF SDK For Web - V10.0.0

# Compare PDF Files

Starting from version 8.5.0, Foxit PDF SDK for Web provides APIs to compare PDF files in the full package, which can compare the differences between text, annotations, page objects (images, paths), and watermarks in two PDF files. In general, to compare PDF files using the APIs, first input two different documents, then return a result document with detailed difference information, finally open the result document to intuitively see the difference information. Following will explain the usage of the APIs in detail.

# APIs Preview

https://developers.foxit.com/developer-hub/document/developer-guide-pdf-sdk-web (opens new window)

# A Simple Example

In this section, we will show you how to compare two documents and control the content display in the result document. The following example will be done based on a created PDFViewer instance.

# Load documents

Before you start, load two documents using PDFViewer.loadPDFDocByFile (opens new window) or PDFViewer.loadPDFDocByHttpRangeRequest (opens new window). These two APIs are used to load PDF documents, and then return a PDFDoc object, without rendering documents on the view.

const baseDoc = await pdfViewer.loadPDFDocByHttpRangeRequest({
    range: {
        url: '/assets/compare-base.pdf'
    }
});
const otherDoc = await pdfViewer.loadPDFDocByHttpRangeRequest({
    range: {
        url: '/assets/compare-other.pdf'
    }
});

# Start to compare documents

After loading the documents, you just need to get the id values of the documents through PDFDoc.getId (opens new window), and then you can start to compare documents.

const baseDocId = baseDoc.getId();
const otherDocId = otherDoc.getId();

const comparedDoc = await pdfViewer.compareDocuments(
    baseDocId,
    otherDocId,
    {
        // The file name of baseDoc, which will be displayed in the result document.
        baseFileName: 'baseFile.pdf',
        // The file name of otherDoc, which will be displayed in the result document.
        otherFileName: 'otherFile.pdf',
        // The file name of the result document.
        resultFileName: pdfViewer.i18n.t('comparison:resultFileName') || 'The result of comparison.pdf'
    }
);

Preview of the effect:

# The Parameters of compareDocuments method

# Page range

You can specify the page range of the two documents to be compared through the following two parameters:

pdfViewer.compareDocuments(
    baseDocId,
    otherDocId,
    {
        // ...
        basePageRange: {
            from: 0,
            end: 2
        },
        otherPageRange: {
            from: 1,
            end: 3
        },
        options: {
            // ...
        }
    }
)

Both basePageRange and otherPageRange objects should include from and end properties which represent the starting and ending page indexes of the pages to be compared. In the above example code, the final pages to be compared are: baseDoc: [0, 1, 2], otherDoc: [1, 2, 3]. Please note that the number of pages specified in the basePageRange and otherPageRange should be same.

# options parameters

options are used to specify the objects that need to be compared and the comparison method. The parameters are explained as follows:

// Whether to compare tables, default is false, which means not to compare.
compareTable: false,
// Whether to detect page deletions and insertions, default is false, which means not to detect.
detectPage: false,
// The width of the outline border of the marker, and the unit is point.
lineThickness: {
    delete: 2,
    insert: 2,
    replace: 2
},
// This parameter is used to set the marker color for different types of differences. The format of marker color is 0xRRGGBB without transparent channel, and the transparency needs to be specified in opacity.
markingColor: {
    delete: 0xfa0505,
    insert: 0x149bff,
    replace: 0xffcc00
},
// This parameter is used to set the transparency of different types of differences.
opacity: {
    delete: 100,
    insert: 100,
    replace: 100
},
// Whether only to compare text differences. If the value is true, only compare the text differences, otherwise compare the annotations, page oobjects (include text), and so on.
textOnly: false

Following is an example with using the above parameters:

# The progress of comparing documents

When the documents that need to be compared are large, it will take more time to generate the result document. At this time, the fourth parameter of the compareDocuments method can accept a callback function to get the processing progress information:

pdfViewer.compareDocuments(
    baseDocId,
    otherDocId,
    {
        ...
    },
    (currentRate) => {
        console.log(currentRate);
    }
)

The range of values for currentRate is from 0 to 100. You can use this value to update the progress bar on the UI.

An example with progress bar:

# Determine whether a document is a comparison result document

The dictionary information of the PDF file generated by the PDFViewer.compareDocuments interface can be used to determine whether a document is a comparison result document. In the SDK, it uses PDFDoc.isCompareDoc() method.

pdfViewer.eventEmitter.on(PDFViewCtrl.ViewerEvent.openFileSuccess, doc => {
    doc.isCompareDoc();
})

Below is a typical dictionary information for a comparison result document. the /PieceInfo at the end of the object (1 0) points to the (244 0) object, that is, points to the dictionary entry of /ComparePDF. So, you can determine whether a document is a comparison result document with this information.

1 0 obj
<</AcroForm 110 0 R/Pages 2 0 R/ViewerPreferences <<>>/OCProperties <</OCGs [62 0 R 63 0 R 64 0 R 65 0 R 66 0 R 67 0 R 68 0 R]/D <</Order [62 0 R 63 0 R 64 0 R 65 0 R 66 0 R 67 0 R 68 0 R]/ON [62 0 R 63 0 R 64 0 R]/OFF [65 0 R 66 0 R 67 0 R 68 0 R]>>>>/Names 367 0 R/PageLayout(TwoColumnLeft)/Type/Catalog/PieceInfo 244 0 R>>
endobj
...

244 0 obj
<</ComparePDF 235 0 R>>
endobj
...
235 0 obj
<</Private 236 0 R>>
endobj
236 0 obj
<</Differences 237 0 R>>
endobj
237 0 obj
<</Nums [1 238 0 R 2 239 0 R 3 240 0 R 4 241 0 R 5 242 0 R 6 243 0 R]>>
endobj
...

← Customize Dynamic Stamps →