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
Posted by at
Labels:

20 comments:

  1. UnknownApril 23, 2017 at 10:10 PM

    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. Prathap KudupuApril 24, 2017 at 12:32 AM

    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. SamMay 29, 2017 at 1:04 AM

    Hi Prathap, Can we convert json to pdf directly?

    ReplyDelete
  4. Prathap KudupuJune 3, 2017 at 11:24 AM

    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. ShankarJuly 4, 2017 at 5:59 AM

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

    ReplyDelete
  6. Prathap KudupuAugust 8, 2017 at 1:14 PM

    Can you please add your code to codepen or pnkr.

    ReplyDelete
    Replies
    1. UnknownAugust 20, 2017 at 8:41 PM

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

      Delete
    2. Prathap KudupuSeptember 26, 2018 at 12:16 AM

      I agree, These are all browser related bugs.

      Delete
  7. UnknownMarch 21, 2018 at 8:23 AM

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

    ReplyDelete
  8. Ethan RyanApril 11, 2018 at 11:03 PM

    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. UnknownOctober 11, 2018 at 11:16 PM

    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. UnknownOctober 21, 2018 at 11:14 PM

    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. AnonymousJune 7, 2020 at 12:20 AM

    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. khanabaazJune 11, 2020 at 8:40 AM

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

    ReplyDelete
  13. mtomJune 13, 2020 at 8:21 AM

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

    ReplyDelete
  14. SHAHZAIBNovember 3, 2020 at 11:54 PM

    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. pinkyDecember 2, 2020 at 2:15 PM

    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. w kMarch 5, 2022 at 12:08 AM

    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
  17. AnonymousApril 29, 2022 at 11:57 AM

    MMORPG OYUNLAR
    ınstagram takipçi satin al
    tiktok jeton hilesi
    tiktok jeton hilesi
    antalya saç ekimi
    referans kimliği nedir
    instagram takipçi satın al
    Metin Pvp
    İNSTAGRAM TAKİPCİ SATIN AL

    ReplyDelete
  18. AnonymousMay 25, 2022 at 4:23 PM

    smm panel
    smm panel
    iş ilanları
    instagram takipçi satın al
    hirdavatciburada.com
    Https://www.beyazesyateknikservisi.com.tr
    SERVİS
    tiktok jeton hilesi

    ReplyDelete

Subscribe to: Post Comments (Atom)