javascriptpdfwebpdftron

Second document not showing the main content even displaying content in left panel but not in main PDFTron

I am trying to show side-by-side PDF comparison using the PDFTron library.

I am able to show the first comparison successfully however the second comparison does not display as intended and no error was logged in the console.

Included libraries

//included following libraries  
<script src="pdftron/lib/webviewer.min.js"></script>
<script src="pdftron/lib/core/webviewer-core.min.js"></script>
<script src="pdftron/lib/core/pdf/PDFNet.js"></script>

var webViewerInstance = null;
var PDFNet = null;
var documentViewer = null;

Creating an instance and initializing the PDFNet

    $(function () {
        WebViewer({
            fullAPI: true,
            path: 'NavResources/Scripts/pdftron/lib'
        }, document.getElementById('viewer')).then(async instance => {

             
            webViewerInstance= instance;
            PDFNet = instance.Core.PDFNet;
            documentViewer = instance.Core.documentViewer;
            await PDFNet.initialize();
            documentViewer.addEventListener('documentLoaded', () => {  webViewerInstance.UI.setLayoutMode(webViewerInstance.UI.LayoutMode.FacingContinuous);
            });
        })

    })

On Click event handler for compare button

    async onClick_comparePDF(file1URL, file2Url) {


        instances.UI.closeDocument().then(async x => {

            console.log(x);

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

            const doc1 = await PDFNet.PDFDoc.createFromURL(file1URL);
            const doc2 = await PDFNet.PDFDoc.createFromURL(file2Url);
            await newDoc.appendTextDiffDoc(doc1, doc2);

            await newDoc.unlock();

            instances.UI.loadDocument(newDoc, { fileName: ccApp.report1 });

        }) 
    }

See the following attached image it is working fine for 1st comparison but for the second comparison is not getting display in the viewer however document loaded event is getting trigger and in the left panel no of pages is displaying but not loading the main content.

1st Comparison SS: enter image description here

2nd Comparison SS: enter image description here

Solution

  • Your code looks correct.

    We are investigating this internally, but you can work around it by disabling the virtual display mode (disableVirtualDisplayMode: true) when instantiating WebViewer.

    Here is the code snippet that worked for me:

    <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script src='/lib/webviewer.min.js'></script>
    <script src="/lib/core/webviewer-core.min.js"></script>
    <script src="/lib/core/pdf/PDFNet.js"></script>
  </head>

  <body style='padding: 0; margin: 0'>
    <button id='compareButton'>COMPARE</button>
    <div id='viewer'></div>
    <script>
      WebViewer({
        fullAPI: true,
        disableVirtualDisplayMode: true,
        path: '/lib'
      }, document.getElementById('viewer')).then(async instance => {
        const { documentViewer, PDFNet, DisplayModeManager } = instance.Core;
        const { loadDocument, closeDocument } = instance.UI;

        await PDFNet.initialize();

        documentViewer.addEventListener('documentLoaded', () => {
          instance.UI.setLayoutMode(instance.UI.LayoutMode.FacingContinuous);
        });

        document.getElementById('compareButton').addEventListener('click', async () => {
          const newDoc = await PDFNet.PDFDoc.create();
          await newDoc.lock();

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

          await newDoc.unlock();

          loadDocument(newDoc);
        })
      })
    </script>
  </body>
</html>