Error when PdfViewer standalone tries to load pdfium.js

[Tom]

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

[carlos mendez]

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

[Sinthiya Kalimuthu]

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.”

[Visvesvar Venkatesan]

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:

• 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 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:640px;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 {
•   }
• }

 

Sample:  AngularSample_resourceUrl.zip

Regards,

Visvesvar K V