Lag in pdfjsexporess webviewer when opening 5-6mb pdf with 700+pages

Bug Reports
8

Hi Kevin,

I’ll try to give you a sample.

Here we had an issue ended with success and after that I applied locally every tip to the sample. My application is more developed, but the base is the same, so let’s use the sample.
I needed to change several files to run the sample as follow:

package.json file:

"@pdftron/pdfjs-express": "8.4.0",
"react": "17.0.2",
"react-dom": "17.0.2",

index.html file:

<script src="%PUBLIC_URL%/pdfjsexpress/core/webviewer-core.min.js"></script>
<script src="%PUBLIC_URL%/pdfjsexpress/core/pdfjs/PDFJSDocumentType.js"></script>

instead of:
<script src="%PUBLIC_URL%/lib/webviewer.min.js"></script>

copy-webviewer-files.js file (the whole file is as follow):

const fs = require('fs-extra');
const path = require('path');

const copyFrom = path.resolve(__dirname, '../node_modules/@pdftron/pdfjs-express/public/core');
const copyTo = path.resolve(__dirname, '../public/pdfjsexpress/core');

fs.ensureDirSync(copyTo);
fs.copySync(copyFrom, copyTo)

and finally App.js, what I changed the most:

import React, { useRef, useEffect } from 'react';
import './App.css';

const App = () => {
  const viewer = useRef(null);
  const scrollView = useRef(null);

  useEffect(() => {
    if (!viewer) { return }
    const Core = window.Core;
    Core.setWorkerPath('/pdfjsexpress/core');
    const documentViewer = new Core.DocumentViewer();
    // here I applied disableAutomaticLinking and it didn't stop "scanning"
    documentViewer.disableAutomaticLinking();
    window.documentViewer = documentViewer;
    window.WebViewer = {};
    window.WebViewer['l'] = () => 'Insert commercial license key here after purchase';

    documentViewer.setScrollViewElement(scrollView.current);
    documentViewer.setViewerElement(viewer.current);
    documentViewer.loadDocument('/files/PDFTRON_about.pdf').then(instance => {
      console.log('Document loaded');
    });

    // this section was added only for checking "scanning" PDF file for links
    const annotationManager = documentViewer.getAnnotationManager();
    annotationManager.addEventListener(
      'annotationChanged',
      (annotations, action) => {
        const annotation = annotations[0];
        console.log('Annotation changed', action, annotation);
      }
    );

  }, [viewer]);

  return (
    <div className="App">
      <div id="scroll-view" ref={scrollView}>
        <div className="header">React sample</div>
        <div className="webviewer" ref={viewer}></div>
      </div>
    </div>
  );
};

export default App;

You even don’t have tu use my django.pdf file - attatched to the repository PDFTRON_about.pdf file has some links too (less than mine, so it’s faster to test). At the beginning the preview looks bad, please resize the window and then pdf will be readable.

Hopefully, I didn’t miss any change in any of my files and you can easily reproduce the issue.

Best regards,
Dorota