Skip to Content

A while back Chandrashekhar Mahajan 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

To report this post you need to login first.

12 Comments

You must be Logged on to comment or reply to a post.

    1. Chandrashekhar Mahajan

      Nice blog Martin! Yes I was going to ask same question about sharing code on gitHub.

      So basically from backend, we will be getting url pointing to PDF which will be rendered using your custom control code right?

      (0) 
  1. Varun Reddy

    hi Martin,

    I am trying to achieve a multi-platform solution for embedded pdf’s in sapui5 apps. My requirement is mainly due to the fact that iframes are not known to work well in mobile browsers like those on ipads and iphones. Another requirement is that scrolling and pinch to zoom should work.

    Does your control allow scrolling through the pdf and pinch to zoom in ipads?

    Regards,

    Varun

    (0) 
    1. Martin Cook Post author

      Hi Varun,

      My control is just a wrapper based on a iFrame, so it will inherit all the same issues.

      For PDF on Mobile devices at this stage I do not see a solution that would cover all your points, but if you find a solution please let me know.

      Regards,

      Martin

      (0) 
      1. Varun Reddy

        Martin,

        I tried multiple options till date. <iframe> was ruled out the very first day. then i tried <object>, which worked satisfactorily with proper styling in some browsers but had issues with scrolling on IE. Then i found the tag <embed> worked better than <iframe> or <object>. However, in order to fit the biggest pdf (with many pages), you may need to set the height to an insanely high number. This made it render very slowly in ipads.

        Finally and currently i adopted the pdf.js framework to display pdf’s With pdf.js, the scrolling works perfectly and you get additional functions to zoom in and out(as buttons), rotate page, jump to particular page, etc. This looked like the perfect solution but unfortunately it was not accepted by our end users who are ready to let go any other feature pdf.js provides for just 1 feature – Pinch to zoom.

        So, I am trying to work on a new solution which also allows pinch to zoom on touch devices with proper scrolling. I’ll let you know if i strike gold.

        Regards,

        Varun

        (0) 
          1. Varun Reddy

            Hi Martin,

            I reached to a final solution of continuing using the mozilla pdf.js. I added pinch to zoom capabilities by modifying pdf.js/ I used iscroll 5 js cubiq/iscroll · GitHub.

            It works perfectly.

            In my final solution, i handle multiple attachments. I do that with a carousel, with each page of the carousel showing an embedded pdf.

            I will try write a blog to show what i have done as soon as i find time after go-live of the apps.

            Regards,

            Varun

            (1) 
  2. Holger Schäfer

    Hi Martin,

    we are using also a custom iframe component that does that job.

    On an iframe there is a nice property calles “allowfullscreen” to be able to allow videos and other plugins to open content inside fullscreen/kiosk mode.

    Sadly the iframe needs the acrobat reader plugin.

    We are currently focused on sa.m.* widgets and therefore using mozilla pdf lib.

    mozilla/pdf.js · GitHub

    It is a native PDF viewer/renderer using only plain HTML5 possibilities (no need fore the plugin). This approach also work son IOS and Android.

    Cheers Holger

    (0) 
      1. Karthik A

        Hi All,

        I tried your solutions…I can able to View my pdf in Desktop….when i create apk It is going to blank screen 🙁

        I am using SAP Netweaver Gateway service to show my pdf in mobile…Can you please give some idea to me ….

        Thanks,

        Karthik A

        (0) 

Leave a Reply