想要捕获WebViewer中带有/不带有注释的文档加载开始和结束时间

问题描述

查看以下链接后： 1-https://www.pdftron.com/documentation/web/guides/wv-events/->一般显示如何与WebViewer事件进行交互的指南 2-https://www.pdftron.com/api/web/CoreControls.DocumentViewer.html#toc99__anchor->文档查看器触发的所有事件的列表。我相信您需要的所有活动都在那里。

我做了以下编码示例，但是根本无法获得正确的结果。

        <h:outputScript library="js" name="WebViewer/webviewer.js" target="head"/>

          <script type="text/javascript">
          
            var myWebViewer;

            $(document).ready(function() {                  
                $("#viewer").width(#{dmsAnnotationBean.viewWidth});
                $("#viewer").height(#{dmsAnnotationBean.viewHeight});
                var viewerElement = document.getElementById("viewer");
                console.log("before initial");
                myWebViewer = new PDFTron.WebViewer({
                    l: "Agency(xxx.hk/en):ENTERP:SFO Viewer::B:AMS(20190308):BB6765701FF77AD00333527820613FFDFBFB3A4B9DF54DC2549540B604F431F5C7",path: "#{dmsAnnotationBean.webviewerJsPath}",type: "html5",documentType: "pdf",enableAnnotations: true,enableReadOnlyMode: #{dmsAnnotationBean.readOnly},serverUrl: "#{dmsAnnotationBean.servletUrl}/WebViewerAnnotationServlet",annotationUser: "#{dmsAnnotationBean.userName}",annotationAdmin: false,documentId: "#{dmsAnnotationBean.did}",config: "#{dmsAnnotationBean.webviewerJsPath}/config.js",fullAPI: true,ui: 'legacy'
                },viewerElement);
                
                $("#viewer").on('ready',() => {
                    console.log("on #viewer ready");
                    loadDoc();
                    timeLogA();

// timeLogA（[{name：'timelogP1'，value：'on #viewer Ready'}]）; console.log（“在#viewer上准备好结束”）; }）;

                $("#viewer").on('documentLoaded',() => {                       
                    console.log("on #viewer documentLoaded");
                    timeLogA( [{ name : 'timelogP1',value : 'on #viewer ready'}] );
                    console.log("end #viewer documentLoaded");
                    //updateUserDropDown();
                });

                $("#viewer").on('beginRendering',() => {
                    console.log("on #viewer begin rendering");
                    timeLogA( [{ name : 'timelogP1',value : 'on #viewer begin rendering'}] );
                    console.log("end #viewer begin rendering");
                });
                

                myWebViewer.getInstance().docViewer.on('finishedRendering',function(event) {
                    console.log("on #viewer finish rendering");
                    timeLogA( [{ name : 'timelogP1',value : 'on #viewer finish rendering'}] );
                });

            });

        </script>   


        <h:form id="pdfAnnotationForm" >
            <p:remoteCommand name="timeLogA" actionListener="#{dmsAnnotationBean.logTime}" />
            

...

结果如下：

1. 只有在就绪事件下，才能通过timeLogA函数成功写入时间日志
2. 无法成功调用其他事件，例如documentLoaded，beginRendering，finishRendering。即。无法在控制台日志和服务器日志中显示任何事件消息。

如果我使用错误的方法或编码来记录时间日志，请给我一些示例。

谢谢！ 史蒂夫

解决方法

您可以执行与框架无关的代码段之类的操作：

let start = 0;

Webviewer(...).then(instance => {
  const { docViewer } = instance;
  const readyEnd = performance.now();

  console.log('Ready',readyEnd - start);

  start = readyEnd;

  docViewer.on('documentLoaded',() => {
    const end = performance.now();

    console.log('Document Loaded',end - start);

    start = end;
  });

  docViewer.on('annotationsLoaded',() => {
    const end = performance.now();

    console.log('Annotations Loaded',end - start);

    start = end;
  });
});