Sunday, October 4, 2015

Angular - Export to table (XML, PDF, JSON..)

       
we can export data from a table into various format including 
Json, Xml, Pdf .....

What do you need
  • Angularjs
  • Jquery.js
  • Files referenced below

Note: This example would not run in IE 




<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="../scripts/tableExport/tableExport.js"></script>
    <script src="../scripts/tableExport/JqueryBase64.js"></script>
    <script src="../scripts/tableExport/html2canvas.js"></script>
    <script src="../scripts/pdf/base64.js"></script>
    <script src="../scripts/pdf/Jspdf.js"></script>
    <script src="../scripts/pdf/sprintf.js"></script>
    <meta charset="utf-8" />
   </head>
<body>
<div ng-controller="myCtrl">
    <div class="container">
        <br/><br/>
        <h
        <div class="btn-group">
            <button class="btn btn-warning btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> Export Table Data</button>
            <ul class="dropdown-menu " role="menu">
                <li><a href="#" onClick="$('#customers').tableExport({ type: 'json', escape: 'false' });"> <img src='../content/image/icons/json.png' width='24px'> JSON</a></li>
                <li><a href="#" onClick="$('#customers').tableExport({ type: 'json', escape: 'false', ignoreColumn: '[2,3]' });"> <img src='../content/image/icons/json.png' width='24px'> JSON (ignoreColumn)</a></li>
             </ul>
        </div>
        <br/>
        <table id="customers" class="table table-striped">
            <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>

            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.FirstName}}</td>
                <td>{{item.LastName}}</td>
                <td>{{item.Address}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
    <script type="text/javascript">
        var myAppModule = angular.module('myApp', []);
        myAppModule.controller('myCtrl', function ($scope) {
            $scope.exportData = function () {
                $('#customers').tableExport({ type: 'json', escape: 'false' });
            };
            $scope.items = [
                {
                    "FirstName": "Prathap",
                    "LastName": "Kudupu",
                    "Address": "Near Anjana Beach"
                },
                {
                    "FirstName": "Deepak",
                    "LastName": "Dsouza",
                    "Address": "Near Nariman Point"
                }
            ];

        });
      

</script>
  


output


20 comments:

  1. Hie Prathap
    My requirement is as such : We need to create a excel sheet from oracle database. it might contain 7-8 lakh record every time .So if i use angularjs - rest - java- jdbc -oracle parsing this much data and writing back to disk in excel format took too much time nearly(10 min by thread).
    is there is any possible way such that i don't need to parse complete data and i cxan optimize the performance. Any technology i can use
    Thanks in Advance

    ReplyDelete
  2. You can use Phython Pandas. you can refer to my post http://www.prathapkudupublog.com/2017/04/data-analysis-with-python-and-panda.html

    ReplyDelete
  3. Hi Prathap, Can we convert json to pdf directly?

    ReplyDelete
  4. We need a third party library. We can use jsPDF. I have a written an article with simple example (http://www.prathapkudupublog.com/2017/06/client-side-pdf-generation.html). Please let me know if you have any issues

    ReplyDelete
  5. I am not able to see the list when i click on the export table data button. please let me know..

    ReplyDelete
  6. Can you please add your code to codepen or pnkr.

    ReplyDelete
    Replies
    1. Couple of export options doesn't work now..Please fix the sample

      Delete
    2. I agree, These are all browser related bugs.

      Delete
  7. i need to export data table to png in angular 2 , any recommendations ?

    ReplyDelete
  8. The search engines have their conventions; websites that conform by giving the search engines what they want, will find themselves achieving better search engine rankings. The only thing standing between you and the top spots in the search rankings is your competition.Blog Comment

    ReplyDelete
  9. Expected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. We are providing AngularJs training in velachery.
    For more details:AngularJs training in velachery

    ReplyDelete
  10. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition. We are providing AngularJs training in velachery.
    For more details: AngularJs training in Velachery

    ReplyDelete
  11. Hey! I know this is kinda off topic however , I’d figured I’d ask. Would you be interested in exchanging links or maybe guest writing a blog post or vice-versa? My blog covers a lot of the same topics as yours and I believe we could greatly benefit from each other. If you are interested feel free to send me an e-mail. I look forward to hearing from you! Superb blog by the way! web design in new york

    ReplyDelete
  12. I am impressed with this website , very I am a fan . branding agency san francisco

    ReplyDelete
  13. I don’t usually comment but I gotta say thankyou for the post on this amazing one : D. branding sf

    ReplyDelete
  14. I admit, I have not been on this web page in a long time... however it was another joy to see It is such an important topic and ignored by so many, even professionals. I thank you to help making people more aware of possible issues. NCML Webmail

    ReplyDelete
  15. Your blog is too much amazing. I have found with ease what I was looking. Moreover, the content quality is awesome. Thanks for the nudge! dotcomsecrets

    ReplyDelete
  16. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. https://catcherrors.com/repos/pandas-dev/pandas

    ReplyDelete