Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to export html data to pdf in angularjs

Tags:

angularjs

this is my html code where i rendered all json data from .js file but getting

TypeError: Cannot convert undefined or null to object at Function.keys () at DocMeasure.measureNode (pdfmake.js:15647) at DocMeasure.measureDocument (pdfmake.js:15635) at LayoutBuilder.tryLayoutDocument (pdfmake.js:15088) at LayoutBuilder.layoutDocument (pdfmake.js:15076) at PdfPrinter.createPdfKitDocument (pdfmake.js:2130) at Document._createDoc (pdfmake.js:82) at Document.getDataUrl (pdfmake.js:177) at Document.open (pdfmake.js:109) at l.$scope.openPdf (app.js:29)

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="pdfmake.js"></script>
  <script type="text/javascript" src="vfs_fonts.js"></script>
  <script type="text/javascript" src="app.js"></script>
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="raj.js"></script>
    <script type="text/javascript" src="jspdf.js"></script>



</head>

<body ng-app="pdfDemo">
  <div ng-controller="pdfCtrl">
          <div id="pdfContent">
                  <table id="example-table">
                            <thead>
                            <th>firstName</th>
                            <th>lastName</th>
                            <th>Gender</th>
                            <th>Mobile</th>

                            </thead>
                            <tbody>
                            <tr ng-repeat="emp in employees">
                            <td>{{emp.firstName}}</td>
                            <td>{{emp.lastName}}</td>
                            <td>{{emp.gender}}</td>
                            <td>{{emp.mobile}}</td>
                            </tr>

                            </tbody>

                  </table>
          </div>
    <button ng-click="openPdf()">Open Pdf</button>
    <button ng-click="downloadPdf()">Download Pdf</button>
  </div>

</body>

</html>
like image 709
Rajesh gatla Avatar asked Dec 30 '16 11:12

Rajesh gatla


People also ask

What is $$ in AngularJs?

The $ in AngularJs is a built-in object.It contains application data and methods.


2 Answers

I've used this:

https://github.com/MrRio/jsPDF

and then you can use in your controller like this:

 $scope.HTMLclick = function () {
                var pdf = new jsPDF();
                pdf.addHTML(($("#pdfContent")[0]), { pagesplit: true }, function () {
                    pdf.save('myfilename' + '.pdf');
                });

            };
like image 50
federico scamuzzi Avatar answered Sep 19 '22 08:09

federico scamuzzi


You can use pdfmake, to export the pdf

DEMO

var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     $scope.data=  [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];
     
     $scope.export = function(){
        html2canvas(document.getElementById('exportthis'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            }
        });
     }
   }
 ]);
<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="listController">
    <div id="exportthis">
      {{data}}
    </div>
    <button ng-click="export()">export</button>
  </div>
</body>

</html>
like image 37
Sajeetharan Avatar answered Sep 18 '22 08:09

Sajeetharan