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.
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)
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.
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?
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)
Thanks. But when I run this app, pdf file is not shown after upload, like empty below:
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?
What FireFox version do you use? For me, FF 67 works as intended:
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.