在导出为 pdf 之前格式化角度数据表答案

【问题标题】：Formating angular datatable before exporting to pdf在导出为 pdf 之前格式化角度数据表
【发布时间】：2017-12-10 14:05:32
【问题描述】：

var app = angular.module('myApp', ['datatables', 'datatables.buttons']);
app.controller('MyCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {

  $scope.list = [{
      "eid": "10",
      "type": "1",
      "sales": "20",
      "status": "1"
    }, {
      "eid": "20",
      "type": "2",
      "sales": "40",
      "status": "0"
    }, {
      "eid": "30",
      "type": "1",
      "sales": "20",
      "status": "1"
    }
  ];

  $scope.vm = {};

  $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('order', [0, 'asc'])
    .withButtons([
      {
        extend: 'collection',
        text: 'Export',
        buttons: [{
            extend: 'copyHtml5',
            title: 'Mylist'
          },
          {
            extend: 'pdfHtml5',
            title: 'My list'
          }
        ]
      }
    ]);

});

/* Tooltip container */
.tooltips {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltips .tooltipstext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltips:hover .tooltipstext {
    visibility: visible;
}

<html>
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
          <script src="https://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
          <script src="https://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
          <link rel="stylesheet" href="https://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css"> 
                      <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css"> 

      <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="http://l-lin.github.io/angular-datatables/archives/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>

      </head>
        <div class="container">
        <div ng-app="myApp" ng-controller="MyCtrl">

        <table  class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
           <thead>
              <tr>
        	    <th><div class="tooltips">sr <span class="tooltipstext">Poistion</span>
</div>   </th>

        	 <th>Employee ID</th>
        	<th>Type</th>
        	<th>sales</th>
          <th>sales_completed</th>

        </thead>
            <tbody>
          
           <tr ng-repeat="data in list">
              <td> {{ $index+1 }} </td>
             
              <td> {{ data.eid }} </td>
              <td> {{ data.type==2? "admin" : "employee"}} </td>
              <td> {{ data.sales }} </td>
            
              <td> 
              
              <span ng-show="{{ data.status }}=='1'"> <div class="tooltips"><i class="glyphicon glyphicon-ok"></i><span class="tooltipstext">Yes</span></div></span>
              <span ng-show="{{ data.status }}=='0'"> <div class="tooltips"><i class="glyphicon glyphicon-remove"></i><span class="tooltipstext">NO</span></div></span>
  
               </td>
                </tr>
        </tbody>
  
        </table>
        </div>

我正在使用带有导出按钮的angular-datatable 插件。我正在尝试将包含工具提示和字形图标的表格导出为 pdf。我在导出表格时遇到了 2 个问题。

问题 1

<th>
    <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> </th>

导出的 pdf 包含工具提示文本

问题 2

<span ng-show="{{ data.status }}=='1'"> <div class="tooltips"><i class="glyphicon glyphicon-ok"></i><span class="tooltipstext">Yes</span></div></span>

<span ng-show="{{ data.status }}=='0'"> <div class="tooltips"><i class="glyphicon glyphicon-remove"></i><span class="tooltipstext">NO</span></div></span>

表格没有导出字形图标

如何格式化表格以便排除工具提示文本并在导出的 pdf 中显示 glyphicon？

【问题讨论】：

尝试 css 媒体打印...
有资源链接吗？
@media print { .tooltips { display:none; } } 您可以使用@media print 设置您的课程样式，仅用于打印...
在这种情况下@media print 不起作用！
然后构建一个小提琴，不仅给我们代码片段..

标签： angularjs pdf datatables angular-datatables

【解决方案1】：

看看exportOptions。这没有很好的记录，因此如果您需要更多详细信息，您将不得不深入了解dataTables.buttons.js。但基本上你对表格的每个部分都有一组格式化程序回调：

exportOptions: {
  format: {
    header: function( data, column ) {
      ...
    },
    footer: function( data, column ) {
      ...  
    },
    body: function( data, row, column, node ) {
      ...
    }
  }    
}

使用这些回调来排除标记或以其他方式修改内容。我不确定“导出的 pdf 包含工具提示文本”是什么意思，但我猜你想去掉 .tooltipstext <span>? data 持有 <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> 这样你就可以像这样用 jQuery 删除它：

{
  extend: 'pdfHtml5',
  title: 'My list',
  exportOptions: {
    format: {
      header: function ( data, column ) {
        return $(data).find('.tooltipstext').remove().end().text();
       }
    }
  }
}

现在 PDF 列标题将只包含sr。

在导出中包含字形图标更加困难。您将需要重建vfs_fonts.js 并包含glyphicons-halflings-regular.ttf。这是一个指南如何做到这一点

https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side

我自己没试过，所以我不能说是否有任何陷阱

【讨论】：