许多客户询问如何在浏览器端实现文档对比功能。以下是一个完整的实现方案，包含核心代码示例：
// 加载待对比的PDF文档
const baseDoc = await engine.loadPDFDocByFile(baseFile);
const otherDoc = await engine.loadPDFDocByFile(otherFile);
// 获取文档ID
const baseDocId = baseDoc.id;
const otherDocId = otherDoc.id;
// 配置对比参数
const params = {
basePageRange: {
end: 7,
from: 0,
},
otherPageRange: {
end: 7,
from: 0,
},
baseFileName: 'baseFile.pdf',
otherFileName: 'otherFile.pdf',
resultFileName: pdfViewer.i18n.t('comparison:resultFileName') || 'The result of comparison.pdf',
options: {
compareTable: false,
detectPage: false,
lineThickness: {
delete: 2,
insert: 2,
replace: 2
},
markingColor: {
delete: 16385285,
insert: 1350655,
replace: 16763904
},
opacity: {
delete: 100,
insert: 100,
replace: 100
},
textOnly: false
}
}
// 进度回调函数
const onprogress = (progress) => {
console.log(progress)
}
// 执行文档对比
const comparedDoc = await pdfViewer.compareDocuments(baseDocId, otherDocId, params, onprogress);
功能说明
- 文档加载：使用loadPDFDocByFile方法加载需要对比的两个PDF文档
- 参数配置：
- 可设置对比的页面范围
- 自定义输出文件名
- 丰富的对比选项（标记颜色、线条粗细等）
- 进度监控：通过回调函数实时获取对比进度
- 执行对比：调用compareDocuments方法生成对比结果
使用建议
开发者可根据实际需求调整对比参数，特别是标记样式和对比范围等配置项，以获得最佳的对比效果。
有客户咨询如何在浏览器端实现对比功能，可通过代码实现，以下是示例代码：
const baseDoc = await engine.loadPDFDocByFile(baseFile);
const otherDoc = await engine.loadPDFDocByFile(otherFile);
const baseDocId = baseDoc.id;
const otherDocId = otherDoc.id;
const params = {
basePageRange: {
end: 7,
from: 0,
},
otherPageRange: {
end: 7,
from: 0,
},
baseFileName: ‘baseFile.pdf’,
otherFileName: ‘otherFile.pdf’,
resultFileName: pdfViewer.i18n.t(‘comparison:resultFileName’) || ‘The result of comparison.pdf’,
options: {
compareTable: false,
detectPage: false,
lineThickness: {
delete: 2,
insert: 2,
replace: 2
},
markingColor: {
delete: 16385285,
insert: 1350655,
replace: 16763904
},
opacity: {
delete: 100,
insert: 100,
replace: 100
},
textOnly: false
}
}
const onprogress = (progress) => {
console.log(progress)
}
const comparedDoc = await pdfViewer.compareDocuments(baseDocId, otherDocId, params, onprogress);
您可参照代码使用。
