导出到pdf之前格式化角度数据表 [英] Formating angular datatable before exporting to pdf
问题描述
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 插件，带有导出按钮我正在尝试将表格导出为包含工具提示和glyphicon的pdf文件.导出表格时遇到2个问题.
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.
问题1
<th>
<div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> </th>
导出的pdf包含工具提示文本
The exported pdf contains the tooltips text
问题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?
How can i format the table so that the tool tips text are excluded and glyphicon is shown in the exported pdf?
推荐答案
看看 exportOptions .它的文档记录不充分，因此您必须深入研究 dataTables.buttons.js (如果您需要更多详细信息).但基本上，表的每个部分都有一组格式化程序回调:
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 ) {
...
}
}
}
使用这些回调来排除标记或以其他方式修改内容.我不确定"导出的pdf包含工具提示文本"是什么意思，但是我想您想删除.tooltipstext <span>吗? data按住<div class="tooltips">sr <span class="tooltipstext">Poistion</span></div>，这样就可以使用jQuery将其删除:
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();
}
}
}
}
现在，PDF列标题将仅包含sr.
Now the PDF column header will only contain sr.
在出口中包含glyphicons更加困难.您将需要重建vfs_fonts.js并包含glyphicons-halflings-regular.ttf.这是有关操作方法的指南
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
这篇关于导出到pdf之前格式化角度数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
