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


7 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

Labels