使用jspdf在angular js中將html表轉換為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> 

我正在獲取pdf文件。 bt這不是我真正需要的。 請幫助我解決這個問題。

Answer 1

您可以使用AngularJS自定義指令嘗試Ngiriraj Html表導出jQuery插件。 這樣，您還可以選擇其他適用於物流的格式，例如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>