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.

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


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-uilibs‘ 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.


table.PNG


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

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

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

    Regards
    Yamini

    (0) 
    1. 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

      (0) 
      1. 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

        Regards
        Yamini

        (0) 
  2. Dong Zhu

    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

    (0) 
  3. Anirudh Anand

    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,

    Anirudh

    (0) 

Leave a Reply