Working with plugin jsPDF in SAPUI5 Application
- Generate PDF at Client Side with jsPDF plugin - Part 1
- Generate PDF at Client Side with jsPDF plugin - Part 2
1. First we need to develop an application, in which we will display our data from backend system. Here in my demo I have taken a Simple Form with default values in input field.
a. Create an SAPUI5 Application. This is my code.
INDEX.HTML
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metahttp-equiv='Content-Type'content='text/html;charset=UTF-8'/>
<scriptsrc="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("jspdffinaltest1");
var app = new sap.m.App({initialPage:"idview11"});
var page = sap.ui.view({id:"idview11", viewName:"jspdffinaltest1.view1", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<bodyclass="sapUiBody"role="application">
<divid="content"></div>
</body>
</html>
VIEW1.VIEW.JS (View Code)
sap.ui.jsview("jspdffinaltest1.view1", {
/**SpecifiestheControllerbelongingtothisView.
*Inthecasethatitisnotimplemented,orthat"null"isreturned,thisViewdoesnothaveaController.
*@memberOfjspdffinaltest1.view1
*/
getControllerName : function() {
return"jspdffinaltest1.view1";
},
/**IsinitiallycalledonceaftertheControllerhasbeeninstantiated.ItistheplacewheretheUIisconstructed.
*SincetheControllerisgiventothismethod,itseventhandlerscanbeattachedrightaway.
*@memberOfjspdffinaltest1.view1
*/
createContent : function(oController) {
var oLayout = new sap.ui.layout.form.SimpleForm("formId",{
title: "Employee Data",
content: [
new sap.m.Label({text: "Employee ID"}),
new sap.ui.commons.TextView({
text : 'DCHOUBEY',
wrapping : false,
width : '200px',
semanticColor: sap.ui.commons.TextViewColor.Positive,
design: sap.ui.commons.TextViewDesign.H3
}),
new sap.m.Label({text: "Employee Name"}),
new sap.ui.commons.TextView({
text : 'DHANANJAY CHOUBEY',
wrapping : false,
width : '250px',
semanticColor: sap.ui.commons.TextViewColor.Positive,
design: sap.ui.commons.TextViewDesign.H3
}),
new sap.m.Label({text: "Email ID"}),
new sap.ui.commons.TextView({
text : 'DCHOUBEY@gmail.com',
wrapping : false,
width : '300px',
semanticColor: sap.ui.commons.TextViewColor.Positive,
design: sap.ui.commons.TextViewDesign.H3
}),
new sap.m.Label({text: "Mobile Number"}),
new sap.ui.commons.TextView({
text : '9876543210',
wrapping : false,
width : '300px',
semanticColor: sap.ui.commons.TextViewColor.Positive,
design: sap.ui.commons.TextViewDesign.H3
}),
new sap.m.Label({text: "Website Link"}),
new sap.ui.commons.TextView({
text : 'www.google.com',
wrapping : false,
width : '300px',
semanticColor: sap.ui.commons.TextViewColor.Positive,
design: sap.ui.commons.TextViewDesign.H3
}),
new sap.m.Label({text: ""}),
]
});
var oButton = new sap.m.Button("buttonId",{
text: "Download PDF",
width : '200px',
press: function() {
oController.display();
}
});
returnnew sap.m.Page({
title: "Title",
content: [
oLayout, oButton
]
});
}
});
VIEW1.CONTROLLER.JS (Controller Code, Right now of no use)
sap.ui.controller("jspdffinaltest1.view1", {
display: function(){
}
});
2. Our application has been developed now and this is how it’s look like.
![Output.PNG]()
3. Now we need to print this simple form at frontend. For this we need to include libraries or say .js files to our index.html file.
a. For this I visited this URL and downloaded the zipped folder. https://parall.ax/products/jspdf .
b. Extracted it to my machine.
c. After extracting the file, I found a file named with jspdf.js
d. Now we need to include this file in our application. For that I wrote like this in my index.html file. <script src="jspdf.js"></script> and copied jspdf.js file and pasted it to webContent folder of my project.
e. Now we need to display our PDF. For that I wrote a simple code for displaying PDF in my display method of controller.
vardoc = new jsPDF('p','pt','a4', true);
//We'll make our own renderer to skip this editor
var specialElementHandlers = {
'#buttonId': function(element, renderer){
returntrue;
}
};
doc.fromHTML($('#formId').html(),
60,
60,
{
'width': 750,
'elementHandlers': specialElementHandlers
}
);
doc.save('form.pdf');
}
4. According to jsPDF plugin my code must work. I was happy that using this plugin is so easy and this will make our life simple. I executed my application.
Ohhh What is this? From here my frustration started. ![]()
![error1.PNG]()
I Spent a lot of time for searching answer to this error and at last I found a solution to solve this.
I also need to include these three files to our index.html.
<scriptsrc="jspdf.plugin.from_html.js"></script>
<scriptsrc="jspdf.plugin.split_text_to_size.js"></script>
<scriptsrc="jspdf.plugin.standard_fonts_metrics.js"></script>
Thanks to google. I found the solution.![]()
But did I won? Not a chance. I just cleared the first step and second was waiting for me.
![error2.PNG]()
To solve this error, I searched for an adler32cs.js file with same name and I found one here to this folder.![]()
jsPDF-0.9.0rc2\libs\Deflate.
But as I pasted it to my webContent folder. Again another was waiting for me. Till now it was clear that I have to add a file until I solve all of my errors. Added a file from the same folder with name deflate.js.
![error3.PNG]()
But now when executed my code there was some another error. But anyway google is with us and I found this error here. http://stackoverflow.com/questions/20340194/doc-save-throwing-error-with-jspdf .
![error4.PNG]()
This time I was taking extra precautions so altogether added this two files.
<scriptsrc="FileSaver.js"></script>
<scriptsrc="FileSaver.min.js"></script>
Found it at this location jsPDF-0.9.0rc2\libs\FileSaver.js.
5. I executed my code after this long hectic search and implement techniques and WOW![]()
this time a pdf was downloaded. Without a second delay I clicked on that PDF and yes I got some data in PDF. Yes it was the same data which was in my form but this was not looking same as my form was.
![result.PNG]()
I was disappointed![]()
but at the same moment there was some spark, that yes this is possible.
My eyes are bleeding red now.![]()
Doing research for the same and I will let you guys know in my second blog.
Thanks all for your patience. I need a break now.
Regards
Dhananjay
this time a pdf was downloaded. Without a second delay I clicked on that PDF and yes I got some data in PDF. Yes it was the same data which was in my form but this was not looking same as my form was. 
but at the same moment there was some spark, that yes this is possible.
Doing research for the same and I will let you guys know in my 
