search

stephanrauh / ngx-extended-pdf-viewer

A full-blown PDF viewer for Angular 16, 17, and beyond
https://pdfviewer.net
Apache License 2.0
449 stars 167 forks source link

pdfDefaultOptions.assetsFolder with relative path with leading slash #2360

Closed B34v0n closed 3 weeks ago

B34v0n commented 3 weeks ago

Hi, I'm using angular in a kind of interesting setup. I've got a legacy-web-app in which I put angular components as angular-elements - web-components, so standalone components.

Now I want to use the Viewer in this setup. The first problem was, that the assets couldn't be found, like I wrote in https://github.com/stephanrauh/ngx-extended-pdf-viewer/issues/2358#issuecomment-2147548150. The problem for me was, that the assets are not in the http://localhost:port/assets/ - folder, but in a nested folder like http://localhost:port/context/site/somethingelse/assets. With the solution there (to add the NgxExtendedPdfViewerService and setting the assetsFolder), I was able to get "op-chaining-support.js" and "pdf-4.1.891.min.mjs" to be found, because I set the assetsFolder to "/context/site/somethingelse/assets/". The first slash is needed, because in this setup, this.platformLocation.getBaseHrefFromDOM() in https://github.com/stephanrauh/ngx-extended-pdf-viewer/blob/main/projects/ngx-extended-pdf-viewer/src/lib/ngx-extended-pdf-viewer.component.ts#L959 somehow returns null and the url for the assets is completely wrong. The files were found under http://localhost:port/context/site/somethingelse/assets/op-chaining-support.js.

But now I cannot find pdf.worker-4.1.891.min.mjs, because the path is again a mess. The path looks like this: http://localhost:port/context/siteImOn//context/site/somethingelse/assets/op-chaining-support.js

If I put the complete absolute path in there, it works. But that's not practical, cause the app runs on many different systems with many different urls and ports and contextes. Would it be possible to set an relative path with a leading slash and all the assets can be loaded correctly?

I'm using Angular 17.3.10 and Viewer in Version 20.2.0

stephanrauh commented 3 weeks ago

If you can afford sacrificing some performance, you can load the worker file yourself. With most PDF documents, you won't notice the performance penalty - it shows only in a few complex files. For example, you can load the file in the index.html like so:

 <script src="./site/somethingelse/assets/worker-4.3.651-min.mjs" type="module"></script>

Of course, you have to figure out the correct path in your setting. I assume it's relative to the baseHref. A disadvantage of this approach is that the version number of the file changes with every new version.

So maybe it better to experiment with pdfDefaultOptions.workerSrc() first. That's a closure you can use to define your custom worker path. Probably you can even access platformLocation.getBaseHrefFromDOM() in this closure.