Display a PDF in an iFrame - Without Rest From Any Data Source

Community Solutions and Guides
#1

This is not covered in the current demo application of UI Samples and I use this regularly. To insert a pdf or any document type item into an iFrame utilize the following code example to get the document from your data store and create a base64 URL encode that the system will display embeded in the html/iframe.

@Subscribe("displayFrame")
public void onDisplayFrameAttach(final AttachEvent event) {
    byte[] data = clientDc.getItem().getPdfDocument();
    String encode = Base64.getEncoder().encodeToString(data);
    String dataType = "data:application/pdf;base64";
    String dataUri = dataType + pdfEncode;
    displayFrame.setSrc(dataUri);
}

Note - For your own santity, leave the variable assignment separated unless you know it will only be a single file type. With the variables separate it is super easy to implement a context switcher that will let you display multiple image/file types in this way.

Thank you,
Oran

3 Likes