how to export html data to pdf in angularjs

Question

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>

Sajeetharan · Accepted Answer · 2016-12-30 11:34:37Z

23

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>

answered Dec 30, 2016 at 11:34

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Rajesh gatla Over a year ago

yeah ! thank sajeetharan its working fine but when i replace code something like this its not getting

Rajesh gatla Over a year ago

function($scope) { $scope.data= [{firstName:"rajeh",lastName:"gatla",gender:"mgale",mobile:"8143445171"}, {firstName:"sathi",lastName:"wesd",gender:"madfgle",mobile:"8143445171"}, {firstName:"gjds",lastName:"hs",gender:"madfhsdfle",mobile:"8143445171"}, {firstName:"dfdff",lastName:"gahgsftla",gender:"mdfsdsale",mobile:"8143445171"}, {firstName:"dsfsd",lastName:"gatWERWDla",gender:"madfshfle",mobile:"8143445171"}, {firstName:"dfagdsew",lastName:"gatlgfha",gender:"mdfgdfale",mobile:"8143445171"}];

Rajesh gatla Over a year ago

<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>

jain Over a year ago

@Sajeetharan The only pdf exporter where more than 4 columns can be exported. Thanks for the link.

Rishabh Agrawal Over a year ago

in the demo the exported pdf is not very clean

|

Chandra Kudumula · Accepted Answer · 2017-03-09 23:33:05Z

9

Here is the code to export HTML table to EXcel, CSV, Pdf, Doc

https://plnkr.co/edit/HmKBjYmJNjp8mPzIlg52?p=preview

  <body ng-controller="MainCtrl">
<p>Export HTML Table to Excel, Pdf, CSV and Doc</p>

<table class="export-table" style="width: 100%; margin-top: 20px">
      <thead>
          <tr>
              <th>Employee ID</th>
              <th>Last Name</th>
              <th>First Name</th>
              <th>Salary</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="item in reportData">
              <td>{{item.EmployeeID}}</td>
              <td>{{item.LastName}}</td>
              <td>{{item.FirstName}}</td>
              <td>{{item.Salary}}</td>
          </tr>
      </tbody>
</table>
<hr>
<a href="#" data-ng-click="exportAction('csv')"> Export CSV</a><br/><br/>
<a href="#" data-ng-click="exportAction('excel')"> Export Excel</a><br/><br/>
<a href="#" data-ng-click="exportAction('doc')"> Export Doc</a><br/><br/>
<a href="#" data-ng-click="exportAction('pdf')"> Export Pdf</a><br/><br/>

answered Mar 9, 2017 at 23:33

Chandra Kudumula

3343 silver badges7 bronze badges

2 Comments

jain Over a year ago

How to have more than 4 columns in pdf export?

Rishabh Agrawal Over a year ago

i think this library exports only table, not even a single header or something, i was looking for invoicing.

Farzad Yousefzadeh · Accepted Answer · 2017-08-11 13:05:48Z

2

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');
                });

            };

edited Aug 11, 2017 at 13:05

Farzad Yousefzadeh

2,6291 gold badge24 silver badges29 bronze badges

answered Dec 30, 2016 at 11:38

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

2 Comments

mashiah Over a year ago

Hey, I'm using jsPDF in my angular 1.6 project. Do you know How can I print all of my HTML + CSS to a pdf file? TNX

Kishore Konangi Over a year ago

@mashiah, using jsPDF we cannot render CSS i guess.

Diego Venâncio · Accepted Answer · 2018-02-18 14:26:02Z

1

FOR ANGULAR

STEP 1: npm install jspdf-autotable

or in index.html into <head></head> add: <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js">

STEP 2:in Angular-cli.json add:

"scripts": [
    "../node_modules/jspdf/dist/jspdf.min.js",
    "../node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.js"
],

STEP 3: app.component.ts or any other component aff below imports

import { Component } from '@angular/core';

declare var jsPDF: any;

STEP 4: For test put in your component:

export class AppComponent {
  title = 'app works!';

  public columns: string[] = ['Name', 'Phone', 'Whatsapp'];
  public data: string[] = ['Diego Venâncio', '79999565796', '79912345678'];

  constructor() {
    var doc = new jsPDF('p', 'pt');
    doc.autoTable(columns, data);
    doc.save("table.pdf");
  }

}

more details?

answered Feb 18, 2018 at 14:26

Diego Venâncio

6,0672 gold badges54 silver badges78 bronze badges

1 Comment

Anuj Over a year ago

I did same thing in my angular 5 project and I am getting ERROR ReferenceError: jsPDF is not defined at DashboardComponent.downloadPdf

Rohit Parte · Accepted Answer · 2019-05-24 11:27:16Z

Best and feasible way is to use window.print() function. Which does not require any library

Pros

1.No external library require.

2.We can print only selected parts of body also.

3.No css conflicts and js issues.

4.Core html/js functionality

---Simple add below code

CSS to

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

JS code - Call below function on btn click

$scope.printWindow = function () {
  window.print()
}

Note: Use !important in every css object

Example -

.legend  {
  background: #9DD2E2 !important;
}

Collectives™ on Stack Overflow

how to export html data to pdf in angularjs

5 Answers 5

11 Comments

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

11 Comments

2 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related