Compare feature error

Technical Support WebViewer
,
1

Знімок екрана (127)
Знімок екрана (127)1920×1080 271 KB

I have an error when I try to compare both files

This is my code:
import React, { useRef, useEffect } from “react”;
import PropTypes from “prop-types”;
import WebViewer, {runWithoutCleanup} from “@pdftron/webviewer”;

export const licenseKey = ‘license key here’;

const CompareFeature = ({ useFileUrl, resourceId, resourceType }) => {
const pdfUrl = useFileUrl(resourceId, resourceType);
const docView = useRef(null);

useEffect((callback, license_key) => {
WebViewer(
{
licenseKey: licenseKey,
path: “/webviewer”,
enableMeasurement: true,
fullAPI: true,
},
docView.current
).then((instance) => {
// now you can access APIs through the WebViewer instance

  const { Core } = instance;
  const { PDFNet } = instance.Core;

  async function main() {
    await PDFNet.initialize();
    // Start with a PDFDoc (open source documents to compare)
    const doc1 = await PDFNet.PDFDoc.createFromURL(pdfUrl);
    const doc2 = await PDFNet.PDFDoc.createFromURL(pdfUrl);

    // Create an options object
    const options = await PDFNet.PDFDoc.createTextDiffOptions();

    // Before color is 100% red, 25% opacity
    options.setColorA({ R: 1, G: 0, B: 0 });
    options.setOpacityA(0.25);

    // After color is 100% blue, 25% opacity
    options.setColorB({ R: 0, G: 0, B: 1 });
    options.setOpacityB(0.25);

    // // Compare and highlight text differences
    // await doc1.highlightTextDiff(doc2, options);
    //
    // // Compare and highlight text differences in doc1 and doc2
    // await doc1.highlightTextDiff(doc2, options);

    // Exclude footer area from page 1
    const exclusion = [{ x1: 0, y1: 0, x2: 612, y2: 72 }];
    options.addIgnoreZonesForPage(exclusion, 1);

    // // Compare and highlight text differences
    // await doc1.highlightTextDiff(doc2, options);
  }
  PDFNet.runWithoutCleanup(main, licenseKey)
      .then((res) => {
        console.log(res, 'res')
        if (res.succeeded) {
          console.log(res)
        } else {
          console.log(res, 'res erre')
        }
      })
      .catch((e) => console.log(e,'err'));

  Core.documentViewer.addEventListener("documentLoaded", () => {
    // adding an event listener for when a document is loaded
  });
  Core.documentViewer.addEventListener("pageNumberUpdated", () => {
    // adding an event listener for when the page number has changed
  });
});

}, []);

return

;
};

CompareFeature.propTypes = {
useFileUrl: PropTypes.func,
setFileUrl: PropTypes.func,
resourceId: PropTypes.string,
setLoading: PropTypes.func,
};

export default CompareFeature;

2

Hello ystefanyshyn,

Welcome to the PDFTron community forum.

We modified your message because it included your license key, since this is a public forum we removed it for safety.

  1. Does this error occur on every PDF uploaded? If not can you please post the afflicted PDF (as long as it is safe to share publicly)
  2. If the link required certain permissions, you can supply custom headers and credentials as a second parameter in an object, here is the documentation: PDFTron WebViewer Class: PDFDoc

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

3

Thanks for your answer, I tried to add this options, but this douen’t help, so I had the same error. Can this error be related on webService, because I don’t use it for now

4

As for undrestanding, I had a blob, maybe it must be not createFromUrl

5

I have alos tried this example of code and had the same error

Знімок екрана (130)
Знімок екрана (130)713×283 31 KB

WebViewer({
path: ,
licenseKey: ,
fullAPI: true,
}, docView.current)
.then(async instance => {
const { documentViewer, PDFNet } = instance.Core;

      await PDFNet.initialize();

      const newDoc = await PDFNet.PDFDoc.create();
      await newDoc.lock();

      const doc1 = await PDFNet.PDFDoc.createFromURL('./before.pdf',{withCredentials: true, customHeaders: './before.pdf'});
      const doc2 = await PDFNet.PDFDoc.createFromURL('./after.pdf',{withCredentials: true, customHeaders: './after.pdf'});
      await newDoc.appendTextDiffDoc(doc1, doc2);

      await newDoc.unlock();

      instance.UI.loadDocument(newDoc);

      // wait until the document has been loaded
      documentViewer.addEventListener('documentLoaded', () => {
        instance.UI.setLayoutMode(instance.UI.LayoutMode.FacingContinuous);
      });
    });
6

help please in reply

7

Hello ystefanyshyn,

Can you upload the document here? The PDF could be malformed. Are you able to open it in WebViewer Demo? https://www.pdftron.com/webviewer/demo/
The withCredentials and customHeaders for the createFromURL have to include the credentials to access the file (if required)

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

8

Hello tgordon,
Yes in dem version all works

9

Hello,

I was able to get this code snippet working with our own hosted (public) documents:


Webviewer({
  path: "/lib",
  enableMeasurement: true,
  fullAPI: true,
}, document.getElementById('viewer')).then(async (instance) => {
  const { documentViewer, PDFNet } = instance.Core;


  await PDFNet.initialize();

  const newDoc = await PDFNet.PDFDoc.create();
  await newDoc.lock();

  const doc1 = await PDFNet.PDFDoc.createFromURL('https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf');
  const doc2 = await PDFNet.PDFDoc.createFromURL('https://pdftron.s3.amazonaws.com/downloads/pl/Cheetahs.pdf');
  await newDoc.appendTextDiffDoc(doc1, doc2);

  await newDoc.unlock();

  instance.UI.loadDocument(newDoc);

  // wait until the document has been loaded
  documentViewer.addEventListener('documentLoaded', () => {
    instance.UI.setLayoutMode(instance.UI.LayoutMode.FacingContinuous);
  });
});

I would assume then the documents you are passing in are invalid, or they arent accessible.

Best Regards,
Tyler Gordon
Web Development Support Engineer
PDFTron