Apryse WebViewer复用实例调用loadDocument无效问题排查

我尝试使用Apryse的WebViewer加载PDF链接，按照官方文档示例每次调用都初始化新实例时能正常工作，但想复用单个WebViewer实例，调用实例的loadDocument()方法却无法正常运行，且未出现任何报错。请问哪里操作有误？

函数调用 #

loadDocViewer('https://pdfobject.com/pdf/sample.pdf')

无法运行的代码 #

let webViewerInstance;

WebViewer({
    path: '/@pdftron/webviewer/public',
}, document.getElementById('doc-viewer'))
    .then(instance => {
        webViewerInstance = instance
    })
    .catch(error => {
        console.error('Error initializing WebViewer:', error);
    });

function loadDocViewer(url) {
    if (!webViewerInstance) {
        console.error('Doc Viewer is not initialized! Try again in a bit.');
        return;
    }

    webViewerInstance.UI.loadDocument(url);
}

可正常运行的代码 #

function loadDocViewer(url) {
    WebViewer({
        path: '/@pdftron/webviewer/public',
    }, document.getElementById('doc-viewer'))
        .then(instance => {
            instance.UI.loadDocument(url);
        })
        .catch(error => {
            console.error('Error initializing WebViewer:', error);
        });
}

问题分析与解决方法 #

核心问题 #

你的代码逻辑本身没问题，大概率是WebViewer实例未完成初始化就提前调用了loadDocViewer。WebViewer初始化是异步操作，then回调赋值webViewerInstance需要时间，若调用loadDocViewer的时机早于初始化完成，要么触发函数里的错误提示，要么因实例状态异常导致加载静默失败。此外还可能存在跨域或容器元素状态异常的问题。

解决办法 #

1. 保证初始化完成后再执行加载
   用Promise等待实例初始化完成，彻底避免调用时机问题：

   let webViewerInstance;
   const viewerReady = new Promise((resolve) => {
     WebViewer({
       path: '/@pdftron/webviewer/public',
     }, document.getElementById('doc-viewer'))
       .then(instance => {
         webViewerInstance = instance;
         resolve(instance);
       })
       .catch(error => {
         console.error('Error initializing WebViewer:', error);
       });
   });
   
   async function loadDocViewer(url) {
     try {
       const instance = await viewerReady;
       instance.UI.loadDocument(url);
     } catch (err) {
       console.error('Failed to load document:', err);
     }
   }
   

   无论loadDocViewer何时调用，都会等待实例初始化完成后再执行加载操作。

2. 排查跨域与链接有效性
   检查PDF链接是否存在跨域问题，确保目标服务器配置了CORS。可通过浏览器控制台的Network标签查看PDF请求状态，确认资源能正常下载。

3. 验证容器元素状态
   初始化WebViewer后，不要修改容器元素的display、visibility属性或移除该元素，确保容器始终存在且可访问。

内容的提问来源于stack exchange，提问作者seriously