Advanced diff, simplified example?

Product: PDFTron / Webviewer

Product Version: 8.5.0

Please give a brief summary of your issue:
How to do advanced diff, or even just how to show multiple viewers.

Please describe your issue and provide steps to reproduce it:
I’m trying to implement the advanced diff similar to your but not finding it very easy and getting a little frustrated with it.

Firstly at the “Source Code” button does not actually show the source code of the demo. It shows something else which calls the appendTextDiffDoc API which I find confusing given that the sample is described as “shows pixel differences between the two documents”. Is appendTextDiffDoc supposed to be for pixel differences or for “text” differences. If its for pixel differences then how does it differ to appendVisualDiff?

Anyway, ignoring the “Source Code” given that it seems to be for something else, trying to work out how the real demo works is not particularly obvious to the uninitiated.

Is it possible to show a simple piece of code that shows 2 viewers being loaded and the references to the documents in those viewers being obtained? Or vice-versa, 2 documents being loaded and then shown in 2 viewers? Either way, such that the documents could then be used with appendVisualDiff for example.

Also, wondering what the syncNamespaces function does? It is done in the demo, but it’s not clear to me what it’s for. However, it looks like it could be important for what I’m trying to do which involves multiple viewers.

Many thanks.

Hi Jason,

Thank you for your feedback! We are always looking for feedback regarding our samples and potential guides to help customers get started with features and implementations.

First off here’s the full source code for the demo of diff: (592.7 KB)

Here is the API documentation for appendTextDiffDoc and appendVisualDiff. The main difference between the two is that appendVisualDiff will look for differences in non text elements.

As for syncNamespaces, it is used for reusing the same worker files for all the instances of WebViewer so you don’t have to reinstantiate them.

Here is an other demo and sample code for PDF comparison:

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc. is what I’m already looking at.

Thanks for the documentation links but I know where the documentation is already :slight_smile: does helps to clear up the difference between appendTextDiffDoc and appendVisualDiff, but also reinforces that the “Source Code” button against is wrong. To reiterate, the sample is described as “shows pixel differences between the two documents”, but the source code uses appendTextDiffDoc which is for semantic text differences.

I’m still not very clear on syncNamespaces, but I will carry on.

Great to hear that clears up the differences. Thank you for pointing out the use of appendTextDiffDoc in that example, I’ll look more deeply into that.

As for syncNamespaces is there a specific question that I could help clear up?

Here is an other code example, this time correctly using appendVisualDiff in the sample code.

You said “it is used for reusing the same worker files for all the instances of WebViewer so you don’t have to reinstantiate them.”, but I don’t actively instantiate them and also you make it sound like its a performance or memory saving feature whereas the doc link you supplied makes it sound like a requirement for interoperability.

Is it for cases of sharing objects between instances. e.g. if I got a reference to a doc shown in webviewer A and want to show it directly in webviewer B (without doing anything intermediate like serialising it to a byte array)?

Sorry for misleading you on that. I have confirmed with the author that it gets multiple instances of WebViewer and uses the same namespace across those multiple instances.

It doesn’t save memory but it is required for interoperability between different instances so type checks work for the same types.

I must be misunderstanding what you mean by “…so type checks work for the same types.”.

If I do this:

  const doc = await Core.createDocument(url);

  const viewer = await WebViewer({
    path: '/js/libs/pdftron-8.6.0',
    fullAPI: true,
    licenseKey: licenseKey
  }, document.getElementById('viewer'));

  viewer.UI.syncNamespaces({ PDFNet, Core });

  console.log(doc instanceof Core.Document); // true
  console.log(doc instanceof viewer.Core.Document); // false. Why?

Then doc instanceof viewer.Core.Document is false, which is wrong.

If I then went on to try to load doc in the viewer e.g:


it fails with error:

Extension of the document cannot be determined from URL/Path. WebViewer will assume the extension is "pdf".

because I assume it equally failed the instanceof test and so thought it was a url.

Have I misunderstood what syncNamespaces does or am I not using it correctly?