Foxit PDF SDK For Web - V10.0.0

# PDF 文档比较

从 8.5.0 版本开始，Foxit PDF SDK for Web 完整包 (full package) 提供了 API 来对比 PDF 文档，可以比较两个 PDF 文档中文本、注释、页面对象 (图片、路径) 和水印之间的差异。通常来说，使用比较接口来对比 PDF 文档，首先需要输入两个不同的文档，然后返回一个包含详细差异信息的结果文档，最后打开结果文档可以直观地看出两个文档的差异信息。接下来将详细介绍该 API 的用法。

# 接口预览

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

# 一个简单的示例

本节将提供一个简单的示例来展示如何使用文档比较接口来比较两个文档，以及控制结果文档中的内容显示。下面的示例将直接基于一个创建好的 PDFViewer 实例进行。

# 加载文档

在开始之前，先使用 PDFViewer.loadPDFDocByFile (opens new window) 或者 PDFViewer.loadPDFDocByHttpRangeRequest (opens new window) 接口加载两个文档。这两个接口的作用都是加载 PDF 文档，然后返回 PDFDoc 对象，而不会在视图上渲染文档。

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

# 开始对比文档

加载文档后，只需要通过 PDFDoc.getId (opens new window) 接口获取文档的 id 值，然后就可以开始对比文档了。

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

效果预览：

# compareDocuments 接口参数

# 页面范围

通过以下两个参数，可以指定待比较的两个文档的页面范围：

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

basePageRange 和 otherPageRange 对象都必须包括 from 和 end 属性，这两个属性分别代表待比较页面的起始页和结束页索引。在上述示例代码中，最终待比较的页面是： baseDoc: [0, 1, 2]，otherDoc: [1, 2, 3]。需要注意的是，basePageRange 和 otherPageRange 指定的页数必须相同。

# options 参数

options 用于指定待比较的对象和比较方法，其中各个参数解释如下：

// 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

以下是使用上述参数的示例：

# 比较文档的进度

当待比较的文档比较大时，生成结果文档需要花费较多的时间。此时，compareDocuments 方法的第四个参数可以接受一个回调函数，用于获取处理进度信息：

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

currentRate 的取值范围为 0~100。您可以使用这个值在 UI 界面上更新进度条。

带有进度条的示例:

# 判断文档是否为比较结果文档

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.compareDocuments 接口生成的 PDF 文件的字典信息可以用于判定文档是否为比较结果文档。在 SDK 中，则通过 PDFDoc.isCompareDoc() 接口来判定。

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

下面是一个典型的比较结果文档的字典信息，对象 (1 0) 末尾处的 /PieceInfo 指向了 (244 0) 对象，也就是指向了 /ComparePDF 字典项， 我们可以据此判定一个文档是否为比较结果文档。

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
...

← 自定义动态图章 →