Clever Geek Handbook

How to export html table to pdf or Excel in angularjs?

I've tried many methods, but either they have a limit on the number of columns in the pdf, or they have a height limit. And for excel, when I open in MAC, it shows HTML. Can anyone suggest any way that I can export a pdf with more than four columns and has no row limit.

+3


source to share


1 answer


You can try using jsPDF library for this

Html

  <table id="table">
     <thead>
     <tr>
       <th>Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
       <th>Column 4</th>
       <th>Column 5</th>
       <th>Column 6</th>
     </tr>

     </thead>
    <tbody>
      <tr>
         ... 
      </tr>

    </tbody>

  </table>

  <export-to-pdf elem-id="table"></export-to-pdf>


Js

  app.directive('exportToPdf', function(){

   return {
       restrict: 'E',
       scope: {
            elemId: '@'
       },
       template: '<button data-ng-click="exportToPdf()">Export to PDF</button>',
       link: function(scope, elem, attr){

          scope.exportToPdf = function() {

              var doc = new jsPDF();

              console.log('elemId 12312321', scope.elemId);

              doc.fromHTML(
              document.getElementById(scope.elemId).innerHTML, 15, 15, {
                     'width': 170
              });

              doc.save('a4.pdf')

           }
       }                   
   }

});

In my JSFiddle example, I didn't hit the limit for columns, but I didn't find a solution to add css, so you need to do inline styling for the html code

+2


source






More articles:


All Articles