Step 1

First we have to create a table and mention print option button in the above table. Please refer to the below code for table and print options button.

  1. <button type="button" class="btn btn-success" ng-click="PrintRecord()">
  2. <i class="fa fa-download"></i>Print</button>

Step 2

Just mention click event in print options button. The click event name is ng-click="PrintRecord()".

Step 3

Refer to the table id; the table id name is id="tablerecords".

  1. <div class="panel-body">
  2. <table role="grid" id="tablerecords">
  3. <thead class="k-grid-header" role="rowgroup">
  4. <tr role="row">
  5. <th>S.No</th>
  6. <th>Name</th>
  7. <th>Email</th>
  8. <th>Mobile Number</th>
  9. </tr>
  10. </thead>
  11. <tbody role="rowgroup">
  12. <tr ng-repeat="user in UsersList class=" trstyle ">
  14. <td><strong>{{$index+1}}</strong> <td>
  16. <td><strong>{{user.Name}}</strong></td>
  18. <td><strong>{{user.Email}}</strong></td>
  20. <td><strong>{{user.MobileNumber}}</strong></td>
  22. </tbody>
  24. </table>
  26. </div>

Step 4

The click event has been triggered and gets table records value to throw print option page. Just put this code in your js page .

Here click event pass printData function and printData function has to get table records to just proceed to print page.

  1. $scope.PrintRecord = function() {
  2. printData();
  3. }
  5. function printData() {
  6. var divToPrint = document.getElementById("tablerecords");
  7. newWin = window.open("");
  8. newWin.document.write(divToPrint.outerHTML);
  9. newWin.print();
  10. newWin.close();
  11. }