第二个文档不显示主要内容，甚至在左侧面板中显示内容，但不在主 PDFTron 中显示

Question

我正在尝试使用 PDFTron 库显示并排 PDF 比较。

我能够成功显示第一个比较，但是第二个比较没有按预期显示，并且控制台中没有记录错误。

包含的库

//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;

创建实例并初始化 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);
            });
        })

    })

比较按钮的 Click 事件处理程序

    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 });

        }) 
    }

请参阅下面的附图，它在第一次比较中工作正常，但在第二次比较中未在查看器中显示，但是文档加载事件正在触发，并且在左侧面板中显示的页面数量但未加载主要内容.

第一次比较SS：

第二次比较SS：

Answer 1

您的代码看起来是正确的。

我们正在内部调查此问题，但您可以通过在实例化 WebViewer 时禁用虚拟显示模式 (disableVirtualDisplayMode: true) 来解决此问题。

这是对我有用的代码片段：

<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>

第二个文档不显示主要内容，甚至在左侧面板中显示内容，但不在主 PDFTron 中显示

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

javascript

pdf

web

pdftron