Setting up the viewer.mjs with a toolbar

[u-ashikov]

Hi guys,

I need your help in order to set up and use the viewer.mjs. Currently I have downloaded the latest release of the pdfjs library (4.0.189). After that I have created a simple ASP.NET MVC application with a single page that loads a pdf document from an endpoint. Here are my questions/issues:

• I have managed to use the viewer with the toolbar but actually if I don't set height and width of the viewer container it does not display the PDF on the screen

• I have used directly the viewer.mjs, viewer.css without any change. How do I build a custom, very simple viewer instead of using all of the options and the source files in the web folder?

• How do I initialize a new PDF viewer with a toolbar passing to it the options like the url of the PDF file, the initial page to be displayed, etc.?

• How to dynamically pass different pdf files loaded from an API endpoint because now I have hardcoded the endpoint directly into the viewer.mjs source code file and it loads always the same file? I believe this is wrong and I can't load different files this way.

• Is there any complete example on how to use the library with the viewer and the toolbar in a very simple way? I have read a lot of documentation and issues but none of them helped me to understand how to achieve the points above.

In the attached file you will find my html file using the viewer.msj, pdf.mjs and the pdfworker.mjs.

Thanks in advance!
Index.txt

[AsenSantev]

Hey! I have similar problem. Would love to have some more info. Thanks!

[lasseborly]

Did you guys figure this out? If not I might be able to help with some of it. Remind me to responds here if I forget.

[lasseborly]

I have managed to use the viewer with the toolbar but actually if I don't set height and width of the viewer container it does not display the PDF on the screen

Setting position:absolute; on the outerContainer worked for me.

I have used directly the viewer.mjs, viewer.css without any change. How do I build a custom, very simple viewer instead of using all of the options and the source files in the web folder?

That is a long journey. I have been down it and it's a lot of hard work. Start from the viewer instead. It's pretty customizable.

How do I initialize a new PDF viewer with a toolbar passing to it the options like the url of the PDF file, the initial page to be displayed, etc.?

You need to make sure that the viewer has finished loading before you can configure.

document.addEventListener("webviewerloaded", () => {
  window.PDFViewerApplicationOptions.set("defaultUrl", "/your_file.pdf")
})

There is a lot of other event that is on an eventbus on the PDFViewerApplication.
For example if you want to do something with annotations you need to wait for them to have rendered.

    document.addEventListener("webviewerloaded", () => {
        window.PDFViewerApplicationOptions.set("defaultUrl", "/your_file.pdf")

        window.PDFViewerApplication.initializedPromise.then(() => {
            window.PDFViewerApplication.eventBus.on('annotationeditorlayerrendered', () => {
             // Do something with annotation
            })
        })

    })

How to dynamically pass different pdf files loaded from an API endpoint because now I have hardcoded the endpoint directly into the viewer.mjs source code file and it loads always the same file? I believe this is wrong and I can't load different files this way.

As described above, you wait for the viewer to load and then you are able to change options around. If you want to change it after the fact then you could do something like:

window.PDFViewerApplication.open({ url: "/your_file.pdf"})

Is there any complete example on how to use the library with the viewer and the toolbar in a very simple way? I have read a lot of documentation and issues but none of them helped me to understand how to achieve the points above.

Not as far as I know. You just need to read the source code I'm afraid. Which is pretty good, but there is a lot so it takes some digging.