Display PDF in Vaadin version 14+

Viewed 740

What is the best way to display PDF file in Vaadin 14? i want to display a pdf file in a dialog, but i'm not sure how to render the pdf files. I saw some post about embedded pdf view,pdf browser and EmbeddedPdfDocument, but i can't tell if they are compatible with 14 or not.Is there a new method to do this?

2 Answers

There is a third party addon to render a PDF in Vaadin 14. Your can find it here: https://vaadin.com/directory/component/pdf-browser/

That gives you the possibility to render a pdf with this code:

StreamResource streamResource = new StreamResource(
        "report.pdf", () -> getClass().getResourceAsStream("/report.pdf")); // file in src/main/resources/

PdfBrowserViewer viewer = new PdfBrowserViewer(streamResource);
viewer.setHeight("100%");
layout.add(viewer);

Alternatively you can do it in same way as it was commonly done in previous Vaadin framework versions, embedding in IFrame (see Show PDF in a Vaadin View ), which could look something like this

StreamResource streamResource = new StreamResource(
                getPresenter().createPdfStreamSource(), report.getName() + ".pdf");
StreamRegistration registration = VaadinSession.getCurrent().getResourceRegistry().registerResource(resource);
        IFrame iframe = new IFrame(registration.getResourceUri().toString());
        iframe.setHEight("100%");
        layout.add(iframe);

To do it in Vaadin Flow (without an addon) and in a dialog as requested, I'd like to present the following code for your dialog which can be called like any other class. I had to tweak Jean-Christophe his answer a bit.

public class ManualDialog extends Dialog {

    private IFrame iFrame;
    private final String fileName = "fileNameAsFoundUnderYourResourceMap";

    public ManualDialog() {
        this.setHeight("calc(100vh - (2*var(--lumo-space-m)))");
        this.setWidth("calc(100vw - (4*var(--lumo-space-m)))");

        buildLayout();
    }

    private void buildLayout() {
        // HEADER
        HorizontalLayout header = new HorizontalLayout();
        header.setMaxHeight("1em");
        header.setAlignItems(FlexComponent.Alignment.CENTER);
        header.setJustifyContentMode(FlexComponent.JustifyContentMode.BETWEEN);
        header.getStyle().set("margin-top", "-1em");

        Span caption = new Span(getTranslation("main.download.manual"));
        caption.getStyle().set("color", "black");
        caption.getStyle().set("font-weight", "bold");

        Icon closeIcon = new Icon(VaadinIcon.CLOSE);
        closeIcon.setColor(GENERIC_BUTTON_COLOR.getDescription());
        Button closeButton = new Button();
        closeButton.setIcon(closeIcon);
        closeButton.getStyle().set("border", "none");
        closeButton.getStyle().set("background", "transparent");
        closeButton.addClickListener(click -> this.close());

        header.add(caption, closeButton);
        this.add(header);

        // PDF-VIEW
        iFrame = new IFrame();
        iFrame.setSizeFull();
        StreamResource resource = new StreamResource(fileName, () -> new BufferedInputStream(getClass().getClassLoader().getResourceAsStream(fileName)));
        StreamRegistration registration = VaadinSession.getCurrent().getResourceRegistry().registerResource(resource);
        iFrame.setSrc(registration.getResourceUri().toString());

        this.add(iFrame);
        this.open();
    }

    
}
Related