使用jspdf在角度js中将html表转换为pdf答案

【问题标题】：convert html table to pdf in angular js using jspdf使用jspdf在角度js中将html表转换为pdf
【发布时间】：2015-12-30 08:17:21
【问题描述】：

我使用过 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 这不是我所需要的。请帮我解决这个问题..

【问题讨论】：

标签： javascript angularjs pdf jspdf

【解决方案1】：

您可以尝试使用 AngularJS 自定义指令的Ngiriraj Html Table Export 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>

【讨论】：