View PDF from remote URL

[mgodbole]

I just stumbled across this add-on and it is exactly what I was looking for. Awesome job @paodb ! Thank you!

I wish to render a remote pdf file in my Vaadin app, but it is not working.

PdfViewer pdfViewer = new PdfViewer();
pdfViewer.setSrc("https://www.gutenberg.org/files/42911/Bizet-Variations_Chromatiques_de_concert/Bizet-Variations_Chromatiques_de_concert_Theme_A4.pdf");
add(pdfViewer);

The URL which I am using for testing works just fine in my browser https://www.gutenberg.org/files/42911/Bizet-Variations_Chromatiques_de_concert/Bizet-Variations_Chromatiques_de_concert_Theme_A4.pdf

Expectations:

1. The remote PDF would be correctly rendered in my Vaadin page

Reality:

1. The PDF is not rendered.
2. The PDF title is correctly displayed
3. Clicking on the download button on the top right opens the PDF in the browser (verifying that the URL is correct)

All this makes me think that my understanding of public void setSrc(String src) is not correct, even though the API comment says it expects a URL string

Params:
src – url to file

Can someone please help point me in the right direction? Thank you

[paodb]

I did a quick test asumming you're using latest Vaadin 24.4 version and latest add-on version. I can see a browser error related to CORS:

Do you see that same message?

If I try with a different pdf, for example https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf, it renders okay.

If you see the same message about CORS then I think the problem is in the server configuration of the url you're using. It should provide the CORS headers.

[mgodbole]

Hi @paodb I can confirm the same behaviour you mention above. I do get the CORS error but the second URL works just fine. You are a life saver. Thank you!

Also is there any way I can attach any kind of listener to get notified when the user turns the page? For better UX, I would like to "remember" the last page read. The addThumbnailClickedListener is not really reliable, as the user might navigate using the previous/next Vaadin buttons.

[mgodbole]

Update:

        pdfViewer.addClickListener(event -> {
            Notification.show("}> Clicked " + pdfViewer.getCurrentPage());
        });

Good news: This works just fine. I get notified if the user clicks on the previous/next as well as the thumbnails or any other clicks for that matter.

Bad news: The user can still change the page by scrolling. Can't figure out a way to hook a listener onto the scroll.

        pdfViewer.getElement().addEventListener("scroll",event -> {
            Notification.show("}> Scroll " + pdfViewer.getCurrentPage());
        });

This does not work.

Any ideas are most welcome. Thank you

[paodb]

Hi @mgodbole you can use currentPage-changed event . This seems to work when user clicks previous/next button or when scrolling the document:

pdfViewer.getElement().addEventListener("currentPage-changed", event -> {
            Notification.show("Page changed to:" + pdfViewer.getCurrentPage());
        });    

Just a quick note: to keep the conversation focused and ensure each issue gets the attention it needs, please create a new issue for any different or unrelated questions about the component. This makes it easier to track and helps others who might have the same issue. Thanks!

[mgodbole]

That did the trick @paodb Not only does it work for previous/next and scroll, but also for thumbnail selection and navigating directly to a page by typing in the page number. Thank you so much!

Just a quick note: to keep the conversation focused and ensure each issue gets the attention it needs, please create a new issue for any different or unrelated questions about the component. This makes it easier to track and helps others who might have the same issue. Thanks!

Noted.

[mgodbole]

Issue resolved.