將html表格轉換爲使用jspdf的角度js中的pdf

Question

我已經使用了FileSaver.js，jspdf.plugin.table.js和jspdf.js文件。 我在控制器中的代碼如下。

$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"); 
    } 

我有表格與圖像。 BT，而我有圖像我的代碼無法正常工作。如果我有與圖像表它不工作。我的桌子如下。

<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獲得pdf文件。 BT不是我需要的東西。 Plz幫我解決了這個問題..

Answer 1

你可以試用Ngiriraj Html Table Export jQuery插件，使用AngularJS自定義指令。這樣你也可以選擇其他適合物流的格式，如doc和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); 
})(); 

控制器文件

$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’); 
     } 
} 

和HTML代碼視圖頁

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