PDFJSExpress + custom webviewer-ui.min.js

Technical Support
1

PDF.js Express Version
7.3.2

Detailed description of issue
Hi, first of all sorry if this is a bit noob-ish question.
After building custom webviewer-ui.min.js using this documentation - Advanced Customization with PDF.js Express Viewer | Documentation - how do I get PDFJSExpress to use that webviewer-ui.min.js?

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hi Kristina,

No need to apologize we are here to help!

You should be able to just replace the existing one in the webviewer folder in your project. It should be in the webviewer/lib/ui/ directory.

Let me know if you have success with that.

Cheers,
Dustin

4

Hi, thanks for the answer!

We’re pulling PDFJSExpress via npm and we don’t have webviewer/lib/ui. I assume we should replace the one in node_modules/@pdftron/pdfjs-express/public/ui?

Leaving the original contents of node_modules/@pdftron/pdfjs-express/public/ui/chunks is fine?

Update:
I see runing npm run build creates everything that’s within the ui folder, so I assume I can just replace everything and it should work, right?

Here’s the screenshot of our folder structure:

folder_structure
folder_structure344×634 14 KB

Thanks!

5

That should be right, let me know if that works

6

Update:
Resolved. The issue was the differences in index.html:

Original:

...
<body>
  <div id="app"></div>
  <div id="line-connector-wrapper">
    <div id="line-connector-root"></div>
  </div>
  <script src="../core/CoreControls.js"></script>
  <script src="../core/pdfjs/PDFJSDocumentType.js"></script>
  <script src="../core/pdfjs/UIConfig.js"></script>
  <script src="webviewer-ui.min.js"></script>
</body>
...

Replacement:

...
<body>
  <div id="app"></div>
  <div id="line-connector-wrapper">
    <div id="line-connector-root"></div>
  </div>
  <div id="outline-edit-popup-portal"></div>
  <script src="../core/CoreControls.js"></script>
  <script src="webviewer-ui.min.js"></script>
</body>
...

So basically I replaced everything within the ui folder except for index.html and now it works. I think it would probably be good to have this entire procedure in the docs :slight_smile:

If I run into any more issues and/or have other question, do you mind if I just post in this thread, or should I open a new one?

Thanks.

Hi, so this doesn’t actually work for me. [Resolved] I’ll try to give you as many details as possible.

Dev environment:
I pulled webviewer-ui from Github as described in docs, branch 7.3, and got it to run. I implemented a feature we needed (not many changes, PR here - 7.3 nucleus by GTCrais · Pull Request #1 · GTCrais/webviewer-ui · GitHub), everything works in the dev environment. I then ran npm run build which created the build folder with everything in it:

build_folder

This is the console output in dev env, no issues:

dev_console

Production environment:
As we discussed here, I copied the contents of the build folder and pasted it into node_modules/@pdftron/pdfjs-express/public/ui, which replaced the original files there. I made sure I’m running the same version of UI and Core, which is 7.3.3. After running npm run dev, everything builds fine, PDFJSExpress initializes, but then it breaks when trying to load a document. I also tried running (my custom) UI v7.3.3 with Core v7.3.5 but I got the same error.

Console output:

prod_console
prod_console740×349 23.7 KB

Viewer stuck at loading:

viewer_stuck
viewer_stuck1037×753 8.01 KB

When I just install PDFJSExpress directly through npm and don’t replace the viewer with my modified one (so just pull "@pdftron/pdfjs-express": "7.3.3" through npm), everything works as expected.

Please advise. Thanks!

7

Hi Kristina,

I’m glad you were able to resolve the issue!

I agree I’ve added it to my backlog to create more verbose documentation on how to do this. As for any other problems you may encounter it is probably best to post them in a new thread as it is easier for us to see.

Cheers,
Dustin

1 Like