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:

33 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
    Replies
    1. UnknownNovember 29, 2020 at 10:28 AM

      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. 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. AnonymousJune 8, 2020 at 5:00 AM

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

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

    ReplyDelete
  14. 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
  15. 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
  16. 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
  17. ROJDA HAYIRJune 24, 2021 at 11:11 AM

    rastgele görüntülü konuşma - kredi hesaplama - instagram video indir - instagram takipçi satın al - instagram takipçi satın al - tiktok takipçi satın al - instagram takipçi satın al - instagram beğeni satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - binance güvenilir mi - binance güvenilir mi - binance güvenilir mi - binance güvenilir mi - instagram beğeni satın al - instagram beğeni satın al - polen filtresi - google haritalara yer ekleme - btcturk güvenilir mi - binance hesap açma - kuşadası kiralık villa - tiktok izlenme satın al - instagram takipçi satın al - sms onay - paribu sahibi - binance sahibi - btcturk sahibi - paribu ne zaman kuruldu - binance ne zaman kuruldu - btcturk ne zaman kuruldu - youtube izlenme satın al - torrent oyun - google haritalara yer ekleme - altyapısız internet - bedava internet - no deposit bonus forex - erkek spor ayakkabı - webturkey.net - karfiltre.com - tiktok jeton hilesi - tiktok beğeni satın al - microsoft word indir - misli indir

    ReplyDelete
  18. UnknownJuly 20, 2021 at 2:33 PM

    youtube abone satın al
    trendyol indirim kodu
    cami avizesi
    cami avizeleri
    avize cami
    no deposit bonus forex 2021
    takipçi satın al
    takipçi satın al
    takipçi satın al
    takipcialdim.com/tiktok-takipci-satin-al/
    instagram beğeni satın al
    instagram beğeni satın al
    btcturk
    tiktok izlenme satın al
    sms onay
    youtube izlenme satın al
    no deposit bonus forex 2021
    tiktok jeton hilesi
    tiktok beğeni satın al
    binance
    takipçi satın al
    uc satın al
    sms onay
    sms onay
    tiktok takipçi satın al
    tiktok beğeni satın al
    twitter takipçi satın al
    trend topic satın al
    youtube abone satın al
    instagram beğeni satın al
    tiktok beğeni satın al
    twitter takipçi satın al
    trend topic satın al
    youtube abone satın al
    takipcialdim.com/instagram-begeni-satin-al/
    perde modelleri
    instagram takipçi satın al
    instagram takipçi satın al
    takipçi satın al
    instagram takipçi satın al
    betboo
    marsbahis
    sultanbet

    ReplyDelete
  19. Takipçi Satın AlJuly 27, 2021 at 2:15 PM

    film izle - sex hikayeleri - sex hikayesi - erotik hikaye -
    ankara escort - bornova escort - alsancak escort - çeşme escort - izmir escort - smm panel - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - haber - instagram takipçi hilesi - instagram takipçi satın al - ​izmir evden eve nakliyat - seocu - instagram takipçi hilesi - instagram takipçi satın al - izmir escort - takipçi satın al - instagram takipçi satın al - tiktok takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takipçi satın al - instagram takibi bırakanlar - buca escort -
    karşıyaka escort - instagram takipçi hilesi

    ReplyDelete
  20. UnknownAugust 6, 2021 at 8:47 AM

    takipçi satın al
    instagram takipçi satın al
    https://www.takipcikenti.com

    ReplyDelete
  21. UnknownAugust 15, 2021 at 9:29 AM

    www.escortsmate.com
    escortsmate.com
    https://www.escortsmate.com

    ReplyDelete
  22. UnknownSeptember 23, 2021 at 9:55 AM

    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
  23. asdasdsdsaJanuary 31, 2022 at 7:35 AM

    tiktok jeton hilesi
    tiktok jeton hilesi
    binance referans kimliği
    gate güvenilir mi
    tiktok jeton hilesi
    paribu
    btcturk
    bitcoin nasıl alınır
    yurtdışı kargo

    ReplyDelete
  24. 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
  25. parababasıMarch 28, 2022 at 10:19 AM

    evden eve nakliyat
    instagram takipçi satın al
    instagram takipçi satın al
    instagram beğeni satın al
    tiktok takipçi satın al
    bitcoin nasıl alınır
    plaj havlusu
    toptan zeytinyağı
    bardak makinası

    ReplyDelete
  26. UnknownApril 5, 2022 at 5:16 PM

    seo fiyatları
    saç ekimi
    dedektör
    instagram takipçi satın al
    ankara evden eve nakliyat
    fantezi iç giyim
    sosyal medya yönetimi
    mobil ödeme bozdurma
    kripto para nasıl alınır

    ReplyDelete
  27. UnknownApril 14, 2022 at 10:12 AM

    instagram beğeni satın al
    yurtdışı kargo
    seo fiyatları
    saç ekimi
    dedektör
    fantazi iç giyim
    sosyal medya yönetimi
    farmasi üyelik
    mobil ödeme bozdurma

    ReplyDelete
  28. UnknownApril 21, 2022 at 10:34 AM

    bitcoin nasıl alınır
    tiktok jeton hilesi
    youtube abone satın al
    gate io güvenilir mi
    referans kimliği nedir
    tiktok takipçi satın al
    bitcoin nasıl alınır
    mobil ödeme bozdurma
    mobil ödeme bozdurma

    ReplyDelete
  29. UnknownApril 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
  30. UnknownMay 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)