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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
10 | |
9 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 | |
3 |