How to add pdf file to vaadin?

That is, I wrote the program and now I’ll have its "User Guide" added to the system, like: Help.

Closed due to the fact that the essence of the issue is incomprehensible by the participants Alex Chermenin , default locale , Kromster , Eugene Krivenja , Victor 14 December '17 at 19:32 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • What does it mean to add: show it on the page, give a link to download or something else? Where is the file stored: on the external resource, in the database, in the application, in the file system? Write down in detail the expected result. - default locale
  • @defaultlocale for viewing so that users can read and continue to work on the "Guide." Can be stored in the file system. - TheSusanin

1 answer 1

Directly in Vaadin itself there is no component for viewing PDF on the page.

However, on the Vaadin website there is a third-party component repository for Vaadin and on request PDF you can easily find a suitable component https://vaadin.com/directory/search?sort=rating&keyword=pdf

For example PdfViewer

https://vaadin.com/directory/component/pdfviewer

Simple to use:

PdfViewer c = new PdfViewer(file); layout.addComponent(c);

Well, to be honest, working with Vaadin, you should be able to develop your own components, because you can not always find what you need.

And for this you will need, one way or another, sufficient knowledge of HTML / CSS / JavaScript and the ability to implement all this into your application on Vaadin.

You can use some kind of ready-made JavaScript library and CustomLayout

https://vaadin.com/docs/v8/framework/layout/layout-customlayout.html

As JavaScript, use for example PDF.js from Mozilla or WebViewer from PdfTron

Create a file:
/ VAADIN / themes / themename / layouts / mylayout .html

Where

  • themename - the name of the theme used (by default - Valo)
  • mylayout is the name of the layout (then you will need to specify it when creating the CustomLayout)

Then create a CustomLayout

 CustomLayout content = new CustomLayout("layoutname");

Specify the path to additional scripts or styles you can using annotations in the UI - class

 @StyleSheet("app://../VAADIN/themes/valo/additional.css") @JavaScript("app://../VAADIN/themes/valo/additional.js") public class VaadinUI extends UI { // ... }
  • thanks for the directions. - TheSusanin