问题
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>I am using angular-datatable plugin, with export buttons.I am trying to export a table as pdf which contains tool tips and glyphicon.I am facing 2 problems while exporting the table.
Problem 1
<th>
<div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> </th>
The exported pdf contains the tooltips text
Problem 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>
The table is not exporting the glyphicon
How can i format the table so that the tool tips text are excluded and glyphicon is shown in the exported pdf?
回答1:
Take a look at exportOptions. This is not so well documented, so you will have to dive into dataTables.buttons.js if you need more details. But basically you have a set of formatter callbacks for each section of the table :
exportOptions: {
format: {
header: function( data, column ) {
...
},
footer: function( data, column ) {
...
},
body: function( data, row, column, node ) {
...
}
}
}
Use these callbacks to exclude markup or in other ways modify the content. I am not exactly sure what "The exported pdf contains the tooltips text" mean, but I guess you want to strip out the .tooltipstext <span>? data hold <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> so you can remove it with jQuery like this :
{
extend: 'pdfHtml5',
title: 'My list',
exportOptions: {
format: {
header: function ( data, column ) {
return $(data).find('.tooltipstext').remove().end().text();
}
}
}
}
Now the PDF column header will only contain sr.
It is more difficult to include glyphicons in the export. You will need to rebuild vfs_fonts.js and include glyphicons-halflings-regular.ttf. Here is a guide how to do that
https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side
I have never tried that myself, so I cant say if there is any pitfalls
来源：https://stackoverflow.com/questions/44951044/formating-angular-datatable-before-exporting-to-pdf