Performance issues while loading file in web viewer

Product: Web Viewer

Product Version: 11.1.1

We are loading file in the web viewer but getting performance issues with the below code:-

1- Web viewer initializing taking approx 3 sec. Below is the code:

WebViewer(
{
path: “…/…/…/js/lib/PdfTronWebViewer11.1.1/”,
enableMeasurement: true,
licenseKey: ‘license key’,
backendType: ‘ems’,
fullAPI: true,
annotationUser: 12345,
isAdminUser:true
}, viewer
).then(instance => {

 });

2- When we are loading file approx 1MB in the Web-viewer with the help of ‘instance.UI.loadDocument’ function. It is also taking 3-4 seconds. Below is the code:

               const arrayBuffer = xhr.response; // Note: not req.responseText
            var base64 = btoa(
              new Uint8Array(arrayBuffer)
                .reduce((data, byte) => data + String.fromCharCode(byte), '')
            );
            instance.UI.loadDocument(base64ToBlob(base64), { filename: 'myfile.pdf', extension : "pdf" });

I tried to load the file with the path but that is also taking same time. like below code:-

  instance.UI.loadDocument("My pdf file path");

Please let me know why these are code taking too much time. Because of this code , My pdf file is loading very slow in the web viewer.

Please let me know What changes should I do to increase the performance of web viewer.

Thanks,
Rahul Y

1 Like

Hi there,

To clarify in your workflow, the time it takes to load the document into the documentviewer is taking a while, not how the file is being fetched/converted to a base64 and loading the document correct?

Are you able to reproduce this issue when loading it on our showcase demo?

One thing that could affect the load speed could be the explicitly setting
backendType: ‘ems’,

Please omit that and see if that helps with the loading of your document.

In addition, it may also depend on the complexity of the document, i.e. the amount of vector lines or the high number of annotations (in the high thousands +).

Best regards,
Kevin

1 Like

Yes. It is taking time to load the document into the viewer , not conversion.

I have removed this code as well but It’s still taking same time. Even I have removed all the code from construction but it’s still same. I did try with below code:-

  WebViewer(
    {
        path: "../../../js/lib/PdfTronWebViewer11.1.1/",            
        licenseKey: 'license key'
                  
        }, viewer
   ).then(instance => {

 });

Yes . It’s working fine on your demo site.

1 Like

Thank you for your reply,

This could be due to the base64 to blob conversion, could you please try the suggested conversion in our guide and see if that improves your performance?

Best regards,
Kevin Kim

1 Like

Thanks for reply. The ‘loadDocument’ function is taking time to load document in web viewer, not conversion as I have removed all the code of conversion and loading document with the file path like below:-

     instance.UI.loadDocument("My file path");

As you can see in the above code, now I am loading direct file, not doing any conversion but still It’s taking same time.

And Web viewer initializing constructor is also taking time.

1 Like

Hi there,

Thank you for the clarifications,

For WebViewer initializing, you can preload the library to load the workers up front:

For the loadDocument API taking 3 - 4 seconds, this may depend on the file, could you please share an input file for reproducing?

Could you please try updating your WebViewer to the latest version as well?

Best regard,
Kevin

1 Like