SAPUI5 PDF Viewer (SmartForms) Custom Control

A while back ChandrashekharMahajan wrote a great blog on the ways to show PDF in a SAPUI5 application Display Smartform (PDF) in SAPUI5

I mentioned that we used the same approach for our own product FLM, which renders both PDF (SIFbA) and also HTML Based Forms.  And that I was looking to wrap this solution up in a stand alone control.

Well it taken me a little bit longer than a few weeks to find the time to do this, but I have now written the start of this control and the below shows the control set-up.

The Eclipse Project is on gitHub and can be located here https://github.com/MartinJCook/PDFViewerUI5

This means to display a PDF, all you need now are a few lines of code.

var objPDF = new PDFViewer("myPDF");

//Set the PDF Viewer Control with the content via a URL
objPDF.setPDFurl("http://www.adobe.com/content/dam/Adobe/en/company/pdfs/fast-facts.pdf");

 

The Custom Control allows PDF to be displayed both via a URL link or by a BASE64 embedded string.  NB That IE does not support BSE64 embedding.

The Below shows the properties of the control, where either the URL or the BASE64 string can be set, as well as the width and height of the PDF Viewer

"PDFurl" : "string",

"PDFBase64" : "string",

"width" : {type: "sap.ui.core.CSSSize", defaultValue: "600px"},

"height" : {type: "sap.ui.core.CSSSize", defaultValue: "700px"}       

Internally the control uses a HTML Control to define and render a iFrame window as shown by the below aggregations

_HTMLContainer: {type : "sap.ui.core.HTML", multiple : false, visibility: "hidden"},

Then on initialization on the control we embed an iFrame into the HTML Container

var oControl = this;
var oHTML;

oHTML = new sap.ui.core.HTML({
});

//Now embed the iFrame
var iframeID = this.sId + "iFrame";   
oHTML.setContent("<iframe id='"+ iframeID + "' width='100%' height='100%'></iframe>");

this.setAggregation("_HTMLContainer", oHTML);

 

Then when either the URL or BASE64 code is set we locate the iFrame on the DOM and update the src using jQuery as shown below

With the BASE64 we set the src attribute in the following way  <iframe src="data:application/pdf;base64,base64encodedpdf"></iframe>

//overwrite setter for the Set PDF URL
PDFViewer.prototype.setPDFurl = function (sVal) {
      //Now get the iFrame element inside the
      var iframeID = this.sId + "iFrame";

      //Now update the value and also set the source in the iFrame element
      //With the URL to the PDF
      if (sVal) {
          this.setProperty("PDFurl", sVal, true);

 
          //Now set the iFrame src to the URL
          jQuery.sap.byId(iframeID).attr('src', sVal)
    }
};

//overwrite setter for the Set PDF BASE64
PDFViewer.prototype.setPDFBase64 = function (sVal) {
      //Now get the iFrame element inside the
      var iframeID = this.sId + "iFrame";

      //Now update the value and also set the source in the iFrame element
      //With the actual base64 PDF
      if (sVal) {
            this.setProperty("PDFBase64", sVal, true);

 
            //Now set the iFrame src to the BASE64 PDF data
            var srcURL = "data:application/pdf;base64," + sVal;
            jQuery.sap.byId(iframeID).attr('src', srcURL)

      }
};

 

This is just a working example and I sure it can be improved/tweaked, in fact it took longer to write this blog than to actually write the control

Please feel free to make suggestions/improvements and share.

Martin