Problem with initialization viewer

Technical Support
1

PDF.js Express Version
Probably 7.3.3. I’m not sure, because I cannot initialize viewer so I don’t get this info in console.

Detailed description of issue
I get “Failed to load resource: the server responded with a status of 404” when I run my application.
I assume that there’s some problems with accessing index.html with viewer.

image
image918×718 28.7 KB

Full error message:

Failed to load resource: the server responded with a status of 404 (Not Found)
~/lib/pdfexpress/lib/ui/index.html#d=https%3A%2F%2Fwww.w3.org%2FWAI%2FER%2Ftests%2Fxhtml%2Ftestfiles%2Fresources%2Fpdf%2Fdummy.pdf&a=1&filepicker=0&pdfnet=0&enableRedaction=0&enableMeasurement=0&pageHistory=1&notesInLeftPanel=0&singleServerMode=false&selectAnnotationOnCreation=0&id=1:

Expected behaviour
Properly rendered viewer :slight_smile:

Does your issue happen with every document, or just one?
I tried document from url, and a few documents from my local files. Problem is the same for both cases.

Link to document
{Provide a link to the document in question if possible}

Code snippet
Code which i use to initialize viewer:

<script src="~/lib/pdfexpress/lib/webviewer.min.js"></script>

                <div id="express_viewer"></div>

                <script>
                
                const viewer = document.getElementById("express_viewer");

                WebViewer({
                    path: '~/lib/pdfexpress/lib',
                  licenseKey: 'my license code here',
                  initialDoc: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
                }, viewer).then(instance => {
                    onReady();

                    const { docViewer } = instance;
                    docViewer.on('documentLoaded', onDocumentLoaded);
                  });

                  // Vanilla JS
                    const onReady = instance => {
                      // Executed when the viewer is ready
                      // NOTE: Document is not loaded yet
                      instance.enableFilePicker();
                    };

                </script>
1 Like
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

Hey there, this means that the path to your resources is incorrect. Please make sure that path: '~/lib/pdfexpress/lib', is correct. Also, try removing the ~ and using an absolute path.

Thanks!
Logan

4

Hey there,

“~” is equivalent of resource folder in my project.

I tried to change it to absolute path, but I have another error message.

This is my project structure:

image

I used absolute path and now I get this error:

image
image788×66 5.08 KB

Thanks!

5

I also noticed there’s no problems with webviewer.min.js file, so I assume that ‘~/lib/pdfexpress/lib’ path is correct.

6

Hi,

Can you help me somehow?

7

@Logan can you help me?
I still didn’t manage to do that.

8

Hi there,

This is very tough for me to debug as it is an issue with your environment. Are you able to send me a sample project where this is reproducable?

Thanks,
Logan

9

Hello @Logan

How can I sent you sample project?

10

Hi there!

The best way would be to zip up a minimal project where you can reproduce the problem.

Are you able to access {your_local_url}/lib/pdfexpress/lib/ui/index.html directly in your browser? At the end of the day this is an issue with your local environment and it seems like either ~/lib/pdfexpress/lib is incorrect, or your server is not serving /lib/pdfexpress/lib/ui/index.html correctly.

Logan

11

Hi Logan,

I’m encountering an issue with rendering a PDF in my Next.js project and it’s in the test path. I’ve sent you a zip file containing the project. If you could take a look and let me know where I might be making a mistake, it would be greatly appreciated.

project.zip (4.2 MB)

1 Like