View report using Pdf Viewer from UI

Support
1

Hey,
I would like to view a report as pdf first and then download.
For that, how can I create a button in details-view screen and clicking that button, I’ll have the report (created using report add-on) in a split screen using Pdf Viewer (Vaadin add-on).

Any code-snippet with necessary placement or a small project in zipped file will be appreciated.
N.B.: I’m using Jmix 2.3.3

Regards,
Tahsin

2

Hi,
First, set your browser to open pdf file not to download.

image
image1920×1080 133 KB

Second, look at this How I can show a report document? maybe is the same problem what was at mine.

3 
<split id="split" height="100%">
    <vbox padding="false">
        <hbox id="buttonsPanel3" classNames="buttons-panel">
            <button action="leaveApplicationDocDataGrid.create"/>
            <button action="leaveApplicationDocDataGrid.edit"/>
            <button action="leaveApplicationDocDataGrid.remove"/>
        </hbox>
        <dataGrid id="leaveApplicationDocDataGrid" dataContainer="leaveApplicationDocDc" width="100%"
                  height="100%"
                  minHeight="10em" selectionMode="MULTI">
            <actions>
                <action id="create" type="list_create">
                    <properties>
                        <property name="openMode" value="DIALOG"/>
                    </properties>
                </action>
                <action id="edit" type="list_edit">
                    <properties>
                        <property name="openMode" value="DIALOG"/>
                    </properties>
                </action>
                <action id="remove" type="list_remove"/>
            </actions>
            <columns>
                <column property="description"/>
            </columns>
        </dataGrid>
    </vbox>
    <vbox id="filedisplay" height="100%">
    </vbox>
</split>

@Subscribe("requirementDocDataGrid")
public void onRequirementDocDataGridItemClick(final ItemClickEvent<RequirementDoc> event) {
    RequirementDoc selectedReqDoc = event.getItem();

    // ProjectDoc has a property 'docImag' of type byte[]
    byte[] pdfContent = selectedReqDoc.getDocImage();

    PdfViewer pdfViewer = new PdfViewer();
    StreamResource resource = new StreamResource(selectedReqDoc.getName(),
            () -> new ByteArrayInputStream(pdfContent));
    pdfViewer.setSrc(resource);
    // Set the height to "100%" to occupy the full available vertical space
    pdfViewer.setHeight("100%");

    // Clear existing components in the filedisplay layout
    filedisplay.removeAll();

    // Add the PDF Viewer to the layout
    filedisplay.add(pdfViewer);

    // Set the height of the filedisplay VBox explicitly
    filedisplay.setHeight("100%");
    // Explicitly set margin and padding to zero
    pdfViewer.getElement().getStyle().set("margin", "0").set("padding", "0");
    filedisplay.getElement().getStyle().set("margin", "0").set("padding", "0");
}

I’ve already implemented this for loading any pdf from the database. But when I have a report generated by a service bean, is there any way to have a pdf version of that report which can be viewed in a screen apart from direct download?