Can't use standalone component at a URL other than root

[John Anton]

Hi,

I would like to use the standalone PDF viewer in my React app, but if I use it at a URL other than the root, it seems to be looking for its .js files (webworker) in the wrong place:

Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3000/buildings/details/iZLTXCxRnzPrd2ZcwDmO/ej2-pdfviewer-lib/pdfium.js' failed to load. at handleError (http://localhost:3000/static/js/bundle.js:462802:58) at http://localhost:3000/static/js/bundle.js:462821:7

How can I fix this?

Thanks,

Tony

[Chinnamunia Karthik Chinna Thambi]

The reported issue “PDFium path issue when the PDF Viewer is not on the index page” was resolved in version v23.1.40. Kindly upgrade to that version to get the issue resolved.

   

Also, we have added a new API for adding the PDFium path and we have provided guidelines to follow and a sample has been provided for reference.

Load libraries from resourceUrl

 

Create React Pdfviewer sample:

• To create React PDF Viewer sample follow the below mentioned instruction  https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started.

Resolve library path issue:

 

• If you face issues with loading library files due to custom asset location or routing, the resourceUrl API is essential for setting the correct path.
• In your React component class, configure the resourceUrl while initializing the PdfViewerComponent.
• The resourceUrl should be the current launch location plus the path to your custom library (ej2-pdfviewer-lib) like below:
• Current launch location + ‘/ej2-pdfviewer-lib’
• Ex: If current URL is  http://localhost:3000/pdfviewer & path of the library files is ~/public/ej2-pdfviewer-lib
• Then we need to set resourceUrl as  http://localhost:3000/ej2-pdfviewer-lib

 

• Note: Optionally, you can load dependent libraries from Syncfusion's online hosted link if you prefer not to host them locally.
• https://cdn.syncfusion.com/ej2/23.1.40/dist/ej2-pdfviewer-lib

 

 

 

<PdfViewerComponent

         id="container"

         documentPath= https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf

         //resourceUrl=  http://localhost:3000/ej2-pdfviewer-lib

         resourceUrl=  https://cdn.syncfusion.com/ej2/23.1.40/dist/ej2-pdfviewer-lib

         style={{ height: '640px' }}

       >

         {/* Inject the required services */}

         <Inject

           services={[

             Toolbar, Magnification,Navigation,Annotation,

             LinkAnnotation,BookmarkView, ThumbnailView,

             Print,TextSelection,TextSearch,FormFields,

             FormDesigner,

           ]}

         />

</PdfViewerComponent>

 

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/react-route1966464177.zip

Steps to run the sample:

• npm install
• npm start