Question

＆＃13;

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'
          }
        ]
      }
    ]);

});

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

我正在使用angular-datatable插件，带有导出按钮。我正在尝试将表格导出为pdf，其中包含工具提示和glyphicon。我在导出表格时遇到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>

该表未导出glyphicon

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

Answer 1

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

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

使用这些回调排除标记或以其他方式修改内容。我不完全确定＆＃34; 导出的pdf包含工具提示文本＆＃34;是的，但我想你想删除.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。

在导出中包含glyphicons更加困难。您需要重建vfs_fonts.js并包含glyphicons-halflings-regular.ttf。以下是如何做到这一点的指南

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

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

在导出为pdf

1 个答案: