比较 PDF 文件

本示例展示比较文档的两种方式：叠加比较与内容比较。

// 导入 ComPDFKit Web Demo 的 JS 文件。
import ComPDFKitViewer from "@compdfkit_pdf_sdk/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer({
  path: '/',
  initialDoc: 'Your PDF Url',
  licenseKey: 'Input your license here'
}, viewer)
.then((instance) => {
  const { documentViewer } = instance.Core;
  documentViewer.addEventListener('documentLoaded', async () => {
    console.log('ComPDFKit Web Demo loaded');

    // 示例：比较文档
    if (await DocumentCompare(instance.Core)) {
      console.log('Compare document done.');
    } else {
      console.log('Compare document failed.');
    }
  })
})

async function DocumentCompare ({ createDocument }) {
  // 获取要比较的文件。
  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 oldDocument = await createDocument(documentAFile); // 旧文件。
  const newDocument = await createDocument(documentBFile); // 新文件。

  // 叠加比较。内容比较请使用 oldDocument.compareContent(newDocument)。
  const result = await oldDocument.compareDrawings(newDocument, {
    baseAlpha: 0.5, // 旧文件的透明度。
    otherAlpha: 0.5, // 新文件的透明度。
    blendMode: 'normal', // 混合模式，例如 'normal'、'multiply'、'screen'、'colorDodge'、'luminosity'。
    colors: {
      base: '#FBBDBF', // 旧文件的颜色。
      other: '#93B9FD' // 新文件的颜色。
    }
  });

  // 获取比较结果的 Blob 对象。
  const res = new Blob([await result.getFileData()], { type: 'application/pdf' });
  return res;
}