Skip to Content
Author's profile photo Dhananjay Choubey

Generate PDF at Client Side with jsPDF plugin – Part 3

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. 😉

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.

But this didn’t helped me as from beginning I knew that I have to use this file.

This is a lot of story. 😀

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.




                        <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”






                        <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-uilibs‘ if required –>



                                                var view = sap.ui.view({id:“idview11”, viewName:“jspdfautotable.view1”, type:sap.ui.core.mvc.ViewType.JS});




            <body class=“sapUiBody” role=“application”>

                        <div id=“content”></div>



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();




                                    dataType: “json”,

                                    success: function(response){


                                                var data = response.value;



                                                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, {});






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.



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Good to see you again. 😉

      Author's profile photo Yamini Sontakke
      Yamini Sontakke

      Hello Dhananjay

      I am trying to implement the same thing for cordova app but the jsPDF is not working

      Can you help me to generate the pdf for cordova application/or either save the current view in pdf format


      Author's profile photo Michael Appleby
      Michael Appleby

      Please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

      Author's profile photo Yamini Sontakke
      Yamini Sontakke

      Hello Mike ,

      I have already created the thread for my query and marked it as question .

      In that question I have mentioned  what I referred also what I have tried and I am trying to do.

      As Dhananjay's blog was the one I referred I thought the best help I can get may be that would be from his end.

      here's the thread i have created

      How to generate pdf on client side to view and store it on Mobile device (Android/iOS) using Cordova CLI with Eclipse IDE


      Author's profile photo Michael Appleby
      Michael Appleby

      Thanks Yamini!

      Author's profile photo Harsh Srivastava
      Harsh Srivastava


      I am also using jspdf for converting html page to pdf in angular. And by using cordova I converted it to a mobile app but jspdf is not working there. Can you tell me how have you managed to do it.

      Author's profile photo Former Member
      Former Member

      Hi Dhanajay,

      Good post. Followed your steps but I got error: "cannot find methd 'autoTable'. In debug I can see the 'doc' object does not have 'autoTable' method. In table plugin js, it complains that 'in' cannot be used for searching 'default'. Why? Can you state which versions of the two pdf js files you used? Thx.

      Dong Zhu

      Author's profile photo Former Member
      Former Member

      Hey Dhananjay,


      Your code worked like a charm thank you so much 🙂
      But again, am trying to print a form which will print all the details (Even details which can be found below by scrolling down) without having to press print each time. Basically, scrolling implemented. Could you help me out with this. OR anyone if you know.


      Thanks a lot,


      Author's profile photo jhankar Narula
      jhankar Narula

      hi ,

      could u please help me resolve this issue. JSPDF is not defined.

      in index.html:added both plugins

      <script src= "jspdf.debug.js"></script>
      <script src= "jspdf.plugin.autotable.js"></script>


      error:jspdf is not  defined




      thank u