WebViewer. Comparing PDF files by overlaying PDF. React

Technical Support WebViewer
, , , ,
1

WebViewer Version:

Do you have an issue with a specific file(s)?
no
Can you reproduce using one of our samples or online demos?
Are you using the WebViewer server?
no
Does the issue only happen on certain browsers?
no
Is your issue related to a front-end framework?
yes
Is your issue related to annotations?
no

Please give a brief summary of your issue:
(Think of this as an email subject)
Comparing PDF files by overlaying PDF files and creating comparison PDFs does not work

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)
I act based on two examples from the documentation:
example 1
example 2

my implementation:

import type { WebViewerInstance } from '@pdftron/webviewer'

interface CompareFile {
  blob: Blob | null
  extension?: string
}

interface RunOverlayCompareParams {
  firstFile: CompareFile
  instance: WebViewerInstance
  secondFile: CompareFile
}

export const runOverlayCompare = async ({
  firstFile,
  instance,
  secondFile,
}: RunOverlayCompareParams) => {
  if (!firstFile?.blob || !secondFile?.blob || !instance) {
    return
  }

  try {
    const { Core, UI } = instance
    const { PDFNet } = Core

    const loadAsPDFDoc = async (file: CompareFile) => {
      const doc = await Core.createDocument(file.blob || '', {
        extension: file.extension || 'pdf',
      })

      return doc.getPDFDoc()
    }

    const [doc1, doc2] = await Promise.all([loadAsPDFDoc(firstFile), loadAsPDFDoc(secondFile)])

    const getPages = async (pdfDoc: any) => {
      const pages: any[] = []
      const itr = await pdfDoc.getPageIterator(1)
      for (itr; await itr.hasNext(); itr.next()) {
        const p = await itr.current()
        pages.push(p)
      }

      return pages
    }

    const [pages1, pages2] = await Promise.all([getPages(doc1), getPages(doc2)])

    const outDoc = await PDFNet.PDFDoc.create()
    outDoc.lock()

    const maxPages = Math.max(pages1.length, pages2.length)

    for (let i = 0; i < maxPages; i++) {
      let p1 = pages1[i]
      let p2 = pages2[i]

      if (!p1) {
        p1 = await doc1.pageCreate()
      }

      if (!p2) {
        p2 = await doc2.pageCreate()
      }

      await outDoc.appendVisualDiff(p1, p2)
    }

    outDoc.unlock()

    UI.loadDocument(outDoc, {
      extension: 'pdf',
      filename: 'visual-diff.pdf',
    })
  } catch (e) {
    console.error('Overlay compare failed:', e)
  }
}

init webViewer:

 const webViewer = await WebViewer(
      {
        css: './css.css',
        disabledElements: disabledElementsByMode,
        fullAPI: true,
        licenseKey,
        path: './webviewer',
      },
      ref.current
    )

    const { PDFNet, annotationManager } = webViewer.Core
    const { enableElements, setLanguage, setToolbarGroup } = webViewer.UI

    await PDFNet.initialize(licenseKey)

but errors pop up:

  1. if you initialize PDFNet in the runOverlayCompare function:

    image
    image475×195 93.3 KB

  2. if you access an existing instance and take values ​​from it:

    image
    image472×133 70.1 KB

2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems like you’re having issues with comparing PDF files by overlaying them using Apryse’s WebViewer in a React application. The errors might be related to the initialization of the PDFNet library and handling of the PDF documents.

Some things you can try:

  • Ensure that PDFNet is initialized only once and before any PDF operations are performed. Avoid re-initializing it within your runOverlayCompare function.

  • Check if fullAPI is enabled when initializing WebViewer, as this is crucial for using advanced PDF features like overlay comparison.

  • Verify that the files are loaded correctly as PDFDoc objects before attempting any operations on them.

  • Handle any asynchronous operations properly, ensuring that any await calls are used within async functions.

  • Make sure that all your dependencies are up to date, and check for any specific compatibility notes in the documentation.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hi Sharik,

Thank you for reaching out.

From the first snippet, I noticed you are not initializing PDFNet before using it which is likely the source of the issue. You need to have an async function and use:

await PDFNet.initialize(licenseKey)

In the second parameter, you seem to initialize PDFNet, but the code snippets don’t include enough code for me to determine if this is in an async function. For instance, here is my constructor:

 WebViewer({
         path: '/webviewer/lib',
         licenseKey: 'myLicense',
         initialDoc: '/files/demo.docx',
         fullAPI: 'true',
     },

     viewer.current
 ).then(async (instance) => {
     const {
         UI,
         Core
     } = instance;
     const {
         documentViewer,
         annotationManager,
         Annotations,
         PDFNet,
         Tools
     } =
     Core;

     await PDFNet.initialize();
 });

You can see that it looks quite different from your snippet. I have a function that has an instance that is async, and then I call await PDFNet.Initialize().

I invite you to try one of our sample:

Let me know if you have any questions.

Best Regards,
Mickaël.