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


25 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
    Replies
    1. Great Article android based projects

      Java Training in Chennai Project Center in Chennai Java Training in Chennai projects for cse The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  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 would like to express my respect for your generosity giving support to folks who have the need for help with this theme. Your special commitment to getting the solution across was extraordinarily informative and has all the time helped some individuals much like me to realize their ambitions. The warm and friendly useful information denotes a lot to me and a whole lot more to my office workers. Best wishes; from everyone of us. web design manhattan

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

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

    ReplyDelete
  15. 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
  16. 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
  17. Ucuz, kaliteli ve organik sosyal medya hizmetleri satın almak için Ravje Medyayı tercih edebilir ve sosyal medya hesaplarını hızla büyütebilirsin. Ravje Medya ile sosyal medya hesaplarını organik ve gerçek kişiler ile geliştirebilir, kişisel ya da ticari hesapların için Ravje Medyayı tercih edebilirsin. Ravje Medya internet sitesine giriş yapmak için hemen tıkla: ravje.com

    İnstagram takipçi satın almak için Ravje Medya hizmetlerini tercih edebilir, güvenilir ve gerçek takipçilere Ravje Medya ile ulaşabilirsin. İnstagram takipçi satın almak artık Ravje Medya ile oldukça güvenilir. Hemen instagram takipçi satın almak için Ravje Medyanın ilgili sayfasını ziyaret et: instagram takipçi satın al

    Tiktok takipçi satın al istiyorsan tercihini Ravje Medya yap! Ravje Medya uzman kadrosu ve profesyonel ekibi ile sizlere Tiktok takipçi satın alma hizmetide sunmaktadır. Tiktok takipçi satın almak için hemen tıkla: tiktok takipçi satın al

    İnstagram beğeni satın almak için Ravje medya instagram beğeni satın al sayfasına giriş yap, hızlı ve kaliteli instagram beğeni satın al: instagram beğeni satın al

    Youtube izlenme satın al sayfası ile hemen youtube izlenme satın al! Ravje medya kalitesi ile hemen youtube izlenme satın almak için tıklayın: youtube izlenme satın al

    Twitter takipçi satın almak istiyorsan Ravje medya twitter takipçi satın al sayfasına tıkla, Ravje medya güvencesi ile organik twitter takipçi satın al: twitter takipçi satın al

    ReplyDelete