Generate PDF at Client Side with jsPDF plugin – Part 1
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
- Generate PDF at Client Side with jsPDF plugin – Part 3
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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta http-equiv=‘Content-Type’ content=‘text/html;charset=UTF-8’/>
<script src=“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>
<body class=“sapUiBody” role=“application”>
<div id=“content”></div>
</body>
</html>
VIEW1.VIEW.JS (View Code)
sap.ui.jsview(“jspdffinaltest1.view1”, {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that “null” is returned, this View does not have a Controller.
* @memberOf jspdffinaltest1.view1
*/
getControllerName : function() {
return “jspdffinaltest1.view1”;
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf jspdffinaltest1.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();
}
});
return new 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.
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.
var doc = new jsPDF(‘p’,‘pt’,‘a4’, true);
//We’ll make our own renderer to skip this editor
var specialElementHandlers = {
‘#buttonId’: function(element, renderer){
return true;
}
};
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. 😈
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.
<script src=“jspdf.plugin.from_html.js”></script>
<script src=“jspdf.plugin.split_text_to_size.js”></script>
<script src=“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.
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.
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 .
This time I was taking extra precautions so altogether added this two files.
<script src=“FileSaver.js”></script>
<script src=“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.
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
Gr8!!!!!!
Thanks buddy 🙂
Very good document man.. Keep going....
Thanks Naveen for this appreciation 🙂
nice docs 🙂
Thank you Rajendra Kumar 🙂
thank you for sharing document.. 🙂
Thank you 🙂 .
this jspdf stuff is cool. I also did all you did at last, however, finally I was frustrated because of the cross-origin issue with images.
Thanks for sharing. I'm also researching on this these days. 😀
Thanks for sharing!!
Thanks Dhananjay ,
I am facing one Issue when i download that ZIP file.I am not able to find these file .
<script src="FileSaver.js"></script>
<script src="FileSaver.min.js"></script>
Thanks and Regards
Munna Mishra
Very good document man
It's very help full for me and working good.
But my query it's working when page content is small but when page content is large and page has scroll at time it convert only visible page. It's possible we convert hull page in PDF file.
Hi Dhananjay,
Nice Blog!
Can we use jsPDF to show pdf retrieved/generated at server side. I have followed your blog but in our scenario the pdf is being generated at server side and we are using url(<server>/entityset/$value) to get the PDF. Can you please give me some pointer how to set the retrieved pdf in jsPDF.
Dhananjay Choubey
Thanks
Hi Dhananjay,
Thanks for sharing! The first error I do always get is " jsPDF" is not a constructor. I copied the jspdf.js file in a folder within my project called js and added it to ressources in my manifest.json. I just can't figure out why this happens. Do you maybe have any Idea what I have to add to make it work?
Thanks