1. Generate PDF at Client Side with jsPDF plugin - Part 1
2. Generate PDF at Client Side with jsPDF plugin - Part 2
As I promised I am back. :wink:
Many times we need to show our document as a table and sometimes we feel like it’s good to print our JSON data or OData from backend only means no need to display it on frontend side.
In my two previous blog I explained how to print data which is available on our frontend and by the ID of the elements we printed our PDF document. But I met a scenario where I wanted to print my table from the JSON Data.
Scenario was:-
1. What if my table data is too long and it is displayed wrapped on frontend side.
At that time my document which will be printed will not be complete or say we will see ….. at the end of our long text. So I didn’t met my requirement.
2. What if I don’t want to display my table at front end?
Now this was really a big problem. I continued my search on SDN as well as stackoverflow websites for relevant resources. This was the current thread which was live and discussion was going on.
http://scn.sap.com/thread/3757553
But this didn’t helped me as from beginning I knew that I have to use this file.
This is a lot of story. :grin:
Anyway, yes we need a different plugin for printing our backend data as table to PDF format i.e. AutoTable – Table plugin for jsPDF.
In earlier blog I told you that only this jspdf.debug.js file is enough and we don’t have to include a lot of source file to our index.html.
And another plugin is AutoTable plugin.
Download the zip folder and extract it. You will see this file jspdf.plugin.autotable.js
We just have to keep this two files in our index.html.
I have developed a simple application with a button on click of which will download a PDF.
So this is code in 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.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script src="jspdf.debug.js"></script>
<script src="jspdf.plugin.autotable.js"></script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("jspdfautotable");
var view = sap.ui.view({id:"idview11", viewName:"jspdfautotable.view1", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Code of view.
createContent : function(oController) {
var oButton = new sap.ui.commons.Button("buttonId", {
text: "Print Table.!!",
press: oController.pressMe
})
return oButton;
}
Code of Controller.
sap.ui.controller("jspdfautotable.view1", {
pressMe: function(){
var oModel = sap.ui.model.json.JSONModel();
$.ajax({
url: "http://services.odata.org/V3/Northwind/Northwind.svc/Customers?$format=json",
dataType: "json",
success: function(response){
oModel.setData(response.value);
var data = response.value;
console.log(data);
var columns = [
{title: "CustomerID", key: "CustomerID"},
{title: "CompanyName", key: "CompanyName"},
{title: "ContactName", key: "ContactName"},
{title: "ContactTitle", key: "ContactTitle"},
{title: "Address", key: "Address"},
{title: "City", key: "City"},
{title: "Region", key: "Region"},
{title: "PostalCode", key: "PostalCode"},
{title: "Country", key: "Country"},
{title: "Phone", key: "Phone"},
{title: "Fax", key: "Fax"}
];
var doc = new jsPDF('p', 'pt', 'a2');
doc.autoTable(columns, data, {});
doc.save('table.pdf');
}
});
}
});
We can also do it for the data which we are getting from SAP Gateway system.
This is final output.
You can also customize a lot of things. For that visit the official link of AutoTable.
This is last blog for jsPDF plugin but i will keep updating all of those three. I am working on how to display a letter at frontend from some backend data from gateway like invoice of a product purchased. I will update this same blog when i will find a proper solution.
Regards
Dhananjay
- SAP Managed Tags:
9 Comments
