使用jspdf在angular js中将html表转换为pdf

Question

I have used FileSaver.js, jspdf.plugin.table.js and jspdf.js files. My code in controller is below.

$scope.exportPdf = function(sampletable){
     alert('pppp');

   var tbldata = [], fontSize = 8, height = 0, doc;
   doc = new jsPDF('p', 'pt', 'a4', true);
   doc.setFont("times", "normal");
   doc.setFontSize(fontSize);
         tbldata = [];
   tbldata = doc.tableToJson('sampletable');
   height = doc.drawTable(tbldata, {

   });


  // doc.text(120, height + 20, 'Congrats!');
   doc.save("dwnld.pdf");
  }

I have table with image. bt while i have image my code is not working. If i have the table with image it is not working. my table is as below.

<style>
                            .tab{
                                margin-left:10%;
                                }

                                        .table1, .tr1 ,.td1{
                                                            border: 1px solid black;

                                                        }
                                                th, td {
                                                            padding: 5px;
                                                        }
                                    </style>
<table border="1" style="width:80%" class="table1 tab" ng-repeat="m in empname" id="sampletable">
 <tr class="tr1"> 
   <td class="td1">Name</td>
    <td class="td1">uu</td>     
    <td class="td1">hh</td>
   <td class="td1">uu</td>
    </tr>
    <tr class="tr1">
    <td class="td1">uuu</td>
    <td class="td1">hhh</td>        
    <td class="td1">iit</td>
    <td class="td1">iii</td>
                                                                </tr>
                                                                <tr class="tr1">
    <td class="td1">Nojjjjjj</td>
    <td class="td1">22</td>     
    <td class="td1">yyyyyy</td>
    <td class="td1">21</td>
    </tr>

 <tr class="tr1">
  <th height="50" colspan="4">yyyyyyyyyy</th>   
 </tr>
 <tr class="tr1">
    th colspan="4" class="td1">hhhhhhhh</th>
   </tr>

 <tr class="tr1"  >
   <td class="td1" colspan="2">hh</td>
<td class="td1" colspan="2">hh</td>
  </tr>
 <tr class="tr1">
  <td class="td1" colspan="2">hhhhh</td><td class="td1" colspan="2">888</td>
                                                         </tr>

  <tr class="tr1">
    <th height="100" colspan="4" >ggggggggggggggggggggg bbbbbbbbbbbb</th>   
                                                                </tr>


                                            </table> 

Iam getting the pdf file. bt it is not what i need exactly. Plz help me to solve this issue..

Answer 1

You can try the Ngiriraj Html Table Export jQuery plugin, using AngularJS custom directives. That way you can also pick other formats suitable for logistics like doc and xls.

(function(){
//export html table to pdf, excel or doc
var exportTable = function(){
var link = function($scope, elm, attr){
$scope.$on(‘export-pdf’, function(e, d){
      elm.tableExport({type:’pdf’, escape:’false’});
 });
$scope.$on(‘export-excel’, function(e, d){
       elm.tableExport({type:’excel’, escape:false});
 });
$scope.$on(‘export-doc’, function(e, d){
     elm.tableExport({type: ‘doc’, escape:false});
 });
}
return {
  restrict: ‘C’,
  link: link
   }
 }
angular
 .module(‘CustomDirectives’, [])
 .directive(‘exportTable’, exportTable);
})();

The controller file

$scope.exportAction = function(){ 
      switch($scope.export_action){ 
          case ‘pdf’: $scope.$broadcast(‘export-pdf’, {}); 
                      break; 
          case ‘excel’: $scope.$broadcast(‘export-excel’, {}); 
                      break; 
          case ‘doc’: $scope.$broadcast(‘export-doc’, {});
                      break; 
          default: console.log(‘no event caught’); 
       }
}

And the HTML code in the view page

<table class=’export-table’></table>