SAPUI5 PDF Viewer (SmartForms) Custom Control

[Former Member]

A while back chandrashekhar.mahajan

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 :smile:

Please feel free to make suggestions/improvements and share.

Martin