如何在angularjs中将html表格导出为pdf或excel？答案

【问题标题】：How to export html table into pdf or excel in angularjs?如何在angularjs中将html表格导出为pdf或excel？
【发布时间】：2017-04-26 12:28:39
【问题描述】：

我尝试了很多方法，但要么它们有 pdf 中的列数限制，要么它们有高度限制。而对于 excel，当我在 MAC 中打开时，它会显示 HTML。任何人都可以建议我可以导出超过 4 列且对行数没有限制的 pdf 的任何方式。

【问题讨论】：

标签： angularjs angularjs-directive export-to-excel export-to-pdf html-to-pdf

【解决方案1】：

您可以尝试使用 jsPDF 库来执行此操作

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>

  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')

           }
       }                   
   }

});

在我的 JSFiddle example 中我没有达到列的限制，但是我没有找到关于添加 css 的解决方案，所以你必须为 html 代码做内联样式

【讨论】：