Estoy tratando de mostrar una comparación de PDF en paralelo usando la biblioteca PDFTron.
Puedo mostrar la primera comparación con éxito, sin embargo, la segunda comparación no se muestra como se esperaba y no se registró ningún error en la consola.
Bibliotecas incluidas
//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;Creación de una instancia e inicialización de 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); }); }) })En el controlador de eventos Click para el botón de comparación
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 }); }) }Vea la siguiente imagen adjunta, funciona bien para la primera comparación, pero para la segunda comparación no se muestra en el visor, sin embargo, el evento cargado del documento se activa y en el panel izquierdo no se muestra ninguna de las páginas, pero no se carga el contenido principal.
Su código parece correcto.
Estamos investigando esto internamente, pero puede solucionarlo deshabilitando el modo de visualización virtual (disableVirtualDisplayMode: true) al crear instancias de WebViewer.
Aquí está el fragmento de código que funcionó para mí:
<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>