angularjs - bootstrap - datatables angular 6
Formateo de datatable angular antes de exportar a pdf (1)
Eche un vistazo a exportOptions . Esto no está tan bien documentado, por lo que tendrá que sumergirse en dataTables.buttons.js si necesita más detalles. Pero básicamente tienes un conjunto de devoluciones de llamada del formateador para cada sección de la tabla:
exportOptions: {
format: {
header: function( data, column ) {
...
},
footer: function( data, column ) {
...
},
body: function( data, row, column, node ) {
...
}
}
}
Use estas devoluciones de llamada para excluir el marcado o, de alguna otra manera, modifique el contenido. No estoy exactamente seguro de qué significa " El pdf exportado contiene el texto de información sobre herramientas ", pero supongo que quiere quitar el .tooltipstext <span> ? data hold <div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> para que pueda eliminarlo con jQuery de esta manera:
{
extend: ''pdfHtml5'',
title: ''My list'',
exportOptions: {
format: {
header: function ( data, column ) {
return $(data).find(''.tooltipstext'').remove().end().text();
}
}
}
}
Ahora, el encabezado de la columna PDF solo contendrá sr .
Es más difícil incluir glyphicons en la exportación. Tendrá que reconstruir vfs_fonts.js e incluir glyphicons-halflings-regular.ttf . Aquí hay una guía de cómo hacerlo
https://github.com/bpampuch/pdfmake/wiki/Custom-Fonts---client-side
Nunca lo intenté yo mismo, así que no puedo decir si hay trampas
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>
Estoy usando un plugin de datateados angulares , con botones de exportación. Estoy tratando de exportar una tabla como pdf que contiene consejos de herramientas y glyphicon. Tengo 2 problemas al exportar la tabla.
Problema 1
<th>
<div class="tooltips">sr <span class="tooltipstext">Poistion</span></div> </th>
El pdf exportado contiene el texto de información sobre herramientas
Problema 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>
La tabla no está exportando el glyphicon
¿Cómo puedo formatear la tabla para excluir el texto de las sugerencias de herramientas y se muestra glyphicon en el pdf exportado?