Include PDF Reader in JavaScript in Cuba

Is it possible to include PDF Reader in JavaScript into Cuba Platform and open an attachment in it.
Or is it another viewer that exist in Cuba to preview Pdf files.

2 Likes

You can use default PDF preview of browsers with Embedded component.

XML:


<layout spacing="true" expand="pdfBox">
    <upload id="pdfUploadField" caption="Upload pdf file"/>

    <groupBox id="pdfBox" caption="PDF preview" expand="pdfViewer">
        <embedded id="pdfViewer" width="100%" type="BROWSER"/>
    </groupBox>
</layout>

Init of controller:


pdfUploadField.addFileUploadSucceedListener(e -> {
    FileDescriptor fileDescriptor = pdfUploadField.getFileDescriptor();

    try {
        // Save file to middleware
        // If you don't want to save file, use custom implementation of ExportDataProvider
        // and obtain local temp file using FileUploadingAPI.getFile(FileUploadField.getFileId())
        fileUploadingAPI.putFileIntoStorage(pdfUploadField.getFileId(), fileDescriptor);
    } catch (FileStorageException ex) {
        throw new RuntimeException("Unable to save file", ex);
    }

    // commit descriptor to database
    Set<Entity> committed = dataSupplier.commit(new CommitContext(fileDescriptor));
    FileDescriptor fileDescriptorFromDb = (FileDescriptor) committed.iterator().next();

    // use FileDataProvider to provide file from CUBA file storage
    pdfViewer.setSource(String.format("pdf-preview%s.pdf", UUID.randomUUID()),
            new FileDataProvider(fileDescriptorFromDb));
});

Full example project is attached. See modules\web\src\com\company\pdfdemo\web\screens\PdfPreview.java

pdfdemo.zip (22.9K)

1 Like

Hi @artamonov
It works in Safari but didn’t work in Firefox v 62 on MacOS.

regards
Mortoza

It appears that the embedded component has been deprecated in the new platform. What is the right component we should use for displaying pdf in this example?

Some time ago i used
GitHub - mozilla/pdf.js: PDF Reader in JavaScript to view pdf in Cuba-platform.
I will try and find the sourcecode for this.

1 Like

Hi,

Currently, BrowserFrame is a proper replacement for Embedded with type="BROWSER".

Gleb

Gleb, my attched files are in the Collection (Composition) data source. What do you suggest in that case?

Could please you clarify your question?

Hi Gleb
Here is my code:

 @Subscribe("btnDisplay")
private void onBtnDisplayClick(Button.ClickEvent event) {
    //ExtFileDescriptor fd = contractDocumentDataGrid.getSingleSelected().getAttachment();
    ContractDocument contractDocument = (ContractDocument) contractDocumentDataGrid.getSingleSelected();
    ExtFileDescriptor fd = contractDocument.getAttachment();

    if (fd != null) {
        if (fd.getExtension().equalsIgnoreCase("pdf")) {

            imageView.setVisible(false);
            browserFrame.setVisible(true);

            browserFrame.setSource(String.format("pdf-preview%s.pdf", UUID.randomUUID()),
                    new FileDataProvider(fd));
            

        } else {
            browserFrame.setVisible(false);
            imageView.setVisible(true);
            imageView.setSource(FileDescriptorResource.class).setFileDescriptor(fd);

        }
    }
}

and you see below the the same code worked for embedded is not working is not unusual. Could you share what will be the right code?

image

Sure, here it is:

<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        caption="msg://caption"
        messagesPack="com.company.demo.web">
    <layout expand="pdfPreviewBox" spacing="true">
        <upload id="pdfUploadField"
                accept="*.pdf"
                caption="Upload PDF file"
                fileStoragePutMode="IMMEDIATE"/>

        <groupBox id="pdfPreviewBox" caption="PDF Preview" expand="pdfPreview">
            <browserFrame id="pdfPreview" width="100%"/>
        </groupBox>
    </layout>
</window>
@UiController("demo_PdfPreview")
@UiDescriptor("pdf-preview.xml")
public class PdfPreview extends Screen {

    @Inject
    private BrowserFrame pdfPreview;

    @Subscribe("pdfUploadField")
    private void onPdfUploadFieldValueChange(HasValue.ValueChangeEvent<FileDescriptor> event) {
        pdfPreview.setSource(FileDescriptorResource.class)
                .setFileDescriptor(event.getValue());
    }
}

pdf-demo.zip (74.9 KB)

1 Like

Thanks. But when I run this app, pdf file is not shown after upload, like empty below:

image

Noticed that, it is not working in Firefox but working in Safari.

here is my code:

    @Subscribe("btnDisplay")
private void onBtnDisplayClick1(Button.ClickEvent event) {
    ExtFileDescriptor fd = contractDocumentDataGrid.getSingleSelected().getAttachment();

    if (fd != null) {
        if (fd.getExtension().equalsIgnoreCase("pdf")) {

            browserFrame.setSource(FileDescriptorResource.class).setFileDescriptor(fd)
                    .setMimeType("application/pdf");
        } else {
            browserFrame.setSource(FileDescriptorResource.class).setFileDescriptor(fd);
        }
    }
}

Question, how can we get in zoom option when we display image file like what we get when displaying pdf file?
image

What FireFox version do you use? For me, FF 67 works as intended:

44

This functionality is provided by a specific browser and differs depending on the browser.

I also have the same version of firefox v 67.0.4!

Probably, either some extension or browser settings block PDF.