Ng2-pdf-viewer: Shouldn't ng2-pdf-viewer use pdf.worker.min.js from pdfjs-dist library?

[LAlves91]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

My project has to work without outside download requests, so we had to include our own pdf.worker.min.js. But this aproach can be quite troublesome, since pdf.worker.min.js version can change depending on pdfjs version.

As pdfjs-dist library (which is included in ng2-pdf-viewer dependencies) already comes with its version of pdf.worker.min.js, wouldn't it be better for ng2-pdf-viewer to use it instead of downloading it from an external source?

[VadimDez]

@LAlves91 You can always copy pdf.worker.min.js from node_modules to your assets folder before you build and then set it like this https://github.com/VadimDez/ng2-pdf-viewer#set-custom-path-to-the-worker

[VadimDez]

To make setup and use of this library easier - pdf.worker.min.js is getting dowloaded from the CDN in the first place. In this way as a developer you don't need to copy and paste pdf.worker.min.js to your assets folder and link it in the code.

[ihorbond]

@VadimDez an issue I'm having with this setup is that even though I added worker file into assets folder and am setting custom path to it in my component, webpack still grabs the worker from pdfjs-dist and bundles it as .chunk.js file. Do you know if there is any way to avoid this without manually configuring webpack ?

[nika1001]

@VadimDez I'm having the same problem as @LAlves91. Personally I don't like the solution to copy pdf.worker.min.js from the already included pdfjs-dist library into assets folder mainly because of redundancy (it would also require manually checking for new updates).
I'm thinking wouldn't it be possible to somehow dynamically find out the path of pdf worker within the pdfjs-dist library? Something like requirejs.toUrl('pdfjs-dist/build/pdf.worker.js');

[LAlves91]

@VadimDez and @nika1001,

The project I work on had a MAJOR problem recently because of this solution: pdfjs-dist isn't static in ng2-pdf-viewer peer dependencies (pdfjs-dist: "^2.2.228").

• Problem: our version of pdf.worker.min.js was behind considering the latest pdfjs-dist minor release.
• Result: PDF viewer wasn't rendering PDF files but browser console didn't show ANY errors. It took me a while to remember the cause could be our fixed version of pdf.worker.
• Fix: we decided to freeze ng2-pdf-viewer AND pdfjs-dist versions in our package.json. Updates will have to be made with caution.

I think this can be seen as an evidence about this solution not being the best aproach to not downloading pdf.worker from an external url.

Best regards.

[htruong24]

Hi @LAlves91 , I got the same issue with (pdfjs-dist: "^2.2.228"), could you let me know which version you are using in package.json or the package.json content?
Thanks so much.

[LAlves91]

Hi @htruong24 ,

At the moment, this is how we have declared our PDF dependencies in package.json:

"ng2-pdf-viewer": "5.3.2", "pdfjs-dist": "2.1.266",

If your project has the same limitations as mine (application shouldn't access external links), the trick is using these steps:

• Fix ng2-pdf-viewer version;
• See which version of pdfjs-dist that specific ng2-pdf-viewer is using;
• With the information of the previous step, fix the version of pdfjs-dist in your package.json.

Once we followed this steps, all our functionalities which had PDF viewers stabilized.

Best regards!

[htruong24]

Thanks @LAlves91, let me check to see if it work!

[pazuza]

thanks @LAlves91, it's working !

[eedahl]

"pdfjs-dist"

This doesn't really seem to work for me. Using 6.3.2 and 2.4.456. Not sure if it's just me, but access to pdf.worker.min.js seems very flaky, meaning the viewer sometimes works, sometimes doesn't work.

[eedahl]

@VadimDez Is this supposed to be fixed in the latest version? It's still attempting to access a CDN for pdf.worker.min.js for some reason.

[LAlves91]

@eedahl , greetings!

I don't know if I've made one fact clear before: we use the default solution to work with a pdf.worker inside our assets.

But in order for it to work correctly, we have to use the right pdf.worker version (in relation to pdfjs-dist lib, which is a ng2-pdf-viewer dependency). So, we use a specific version of both libraries, copying the right worker to our assets folder. When we have the need to update any of the libraries, we have to make sure pdfjs-dist still use the same worker, replacing it if needed.

Best regards!

[eedahl]

@LAlves91, hi! Thanks for getting back to me.

I actually tried doing this and it worked locally, but when I deployed it to our server it couldn't find the correct path, trying to GET an endpoint that doesn't exist. This seems like an issue with me not dealing with static files correctly in the context of my setup, though.

[LAlves91]

Hey @eedahl !

Sorry for taking so long to answer...I believe you're right. There are two things you should look into:

• How are you importing the pdf.worker file inside your component?
• How are you including the pdf.worker file in your project? Is it in your assets folder? Are the assets being included in production inside angular.json?

Write these informations here, and I'll help you through it!

[tsiegleauq]

In this way as a developer you don't need to copy and paste pdf.worker.min.js to your assets folder and link it in the code.

My project has the same limitations. But instead of copying and pasting the pdf.worker.min.js into my own assets folder, I provided them as an angular asset in my angular.json. Perhaps it might help someone. I suppose using this you do not need to care for manual updates in pdfjs-dist anymore. Still, it might be a good idea to stick the version of both libraries to avoid nasty surprises.

"architect": {
    "build": {
        "options": {
            "assets": [
                "src/assets",
                "src/manifest.json",
                {
                    "glob": "pdf.worker.min.js",
                    "input": "node_modules/pdfjs-dist/build/",
                    "output": "/assets/js/"
                }
            ],

As documented in the readme, you can provide the following to your pdf-components constructor:

public constructor() {
    (window as any).pdfWorkerSrc = '/assets/js/pdf.worker.min.js';
}