Hi,

Im pretty excited trying to use the new standalone PdfViewer but for some reason I'm unable to get it to work. Whenever I'm trying to load a document, I get the follow error:

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/case/5/public/js/ej2-pdfviewer-lib/pdfium.js' failed to load.

at ctx.onmessage (blob:http://localhost:9000/62b6e4fe-716d-4d83-b426-427a0af17b4e:153:7)

Obviously I copied the ej2-pdfviewer-lib folder to my public/js folder as documented. So from what I understand it is this line of code in syncfusion's ejs-pdfviewer package that tries to load pdfium.js from the full history path:

importScripts(event.data.url + '/pdfium.js');

The right path should obviously be 'http://localhost:9000/js/ej2-pdfviewer-lib/pdfium.js' instead of 'http://localhost:9000/case/5/public/js/ej2-pdfviewer-lib/pdfium.js'.

Is there any easy way to fix this?

Current setup is as follow:

vue3 + quasar framework v2.12.5 (with vite)

Glad for any help.

Edit: bit of a hackish way to get it running atleast was to edit

' node_modules\@syncfusion\ej2-pdfviewer\dist\ ej2-pdfviewer.min.js'

' node_modules\@syncfusion\ej2-pdfviewer\dist\ ej2-pdfviewer.umd.min.js'

' node_modules\@syncfusion\ej2-pdfviewer\dist\ ej2-pdfviewer.min.js'

and replace

importScripts(e.data.url + '/pdfium.js'),

with

importScripts('/js/ej2-pdfviewer-lib/pdfium.js'),

which is for sure not a suitable solution.

Thanks

Tom

Yes its a weird behavior, I'm using quasar  with vue 2x and its doing the same thing and reuses the currentURL and appends /public/ js/ej2-pdfviewer-lib/pdfium.js to the current URL in the app

Example :

Docs page  using pdfviewer (standalone)

http://localhost:8084/documents/

pdf viewer tries to load

http://localhost:8084/documents/public/js/ej2-pdfviewer-lib/pdfium.js

Reports page in app using pdfviewer (standalone)

http://localhost:8084/reports/ pdf viewer tries to load

http://localhost:8084/reports/public/js/ej2-pdfviewer-lib/pdfium.js

We have confirmed that the reported issue “ PDFium path issue occurred when the PDF Viewer is not on the index page ” is a defect and logged the defect reported for the same. The fix for the issue will be included in our upcoming weekly NuGet release on October 18, 2023 . You can track the status using the below feedback link.

Feedback link: PDFium path issue when the PDF Viewer is not on the index page | Issue Feedback

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

We have fixed the reported issue “ Pdfium library not loading in Routed sample ” and the fix for the reported issue was included in our latest weekly release v23.1.0.41. Kindly upgrade to that version to get the issue resolved.

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

Load libraries from resourceUrl

Create Angular Pdfviewer sample:

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

Resolve library path issue:

In your Angular 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:4200/pdfviewer & path of the library files is ~/assets/ej2-pdfviewer-lib

Then we need to set resourceUrl as http://localhost:4200/assets/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.41/dist/ej2-pdfviewer-lib

< div class = "content-wrapper" >

< ejs-pdfviewer id = "pdfViewer" [documentPath] = ' document ' [resourceUrl] = ' resourceUrl ' style ="height: 640 px ;display: block "> </ ejs-pdfviewer >

</ div >

-------------------------------------------------------------------------

export class ViewerComponent implements OnInit {

public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf' ;

public resourceUrl = location . protocol + '//' + location . host + '/assets/ej2-pdfviewer-lib' ;

// public resourceUrl = 'https://cdn.syncfusion.com/ej2/23.1.41/dist/ej2-pdfviewer-lib';

ngOnInit (): void {

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 .