如何解决导出时Angular Datatable Add标头
我正在尝试在导出为pdf时向Angular数据表添加自定义标头，但customize函数参数不包括document.body。下面是我的代码：
this.dtOptions = {
data: data,dom: 'Bfrtip',buttons: [
{
extend: 'pdfHtml5',customize: function ( win ) {
$(win.document.body).append( $('#header'));
}
}],columns: [
{
title: 'ID',data: 'id'
},{
title: 'Name',data: 'name'
}
]
};
var table = $('.datatable').DataTable(this.dtOptions);
请协助
解决方法
首先，文档链接：
- PdfHtml5 Datatables documentation。搜索
Option，并在其中搜索customize。对于pdf导出中的数据表属性和选项。 - PDFMake documentation。对于
fontSize，alignment...等样式和选项。
第二，示例代码：
dom: 'Bfrtip',buttons: [{
extend: 'pdfHtml5',text: 'PDF with header',customize: function(doc) {
doc.content.splice(1,{
margin: [0,12],alignment: 'center',text: 'My Header',fontSize: 15
});
}
}]
第三，结果：
第四，此示例的所有代码：
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css">
</head>
<body>
<table id="stationTypesList">
<thead>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
<th>Test 4</th>
<th>Test 5</th>
<th>Test 6</th>
<th>Test 7</th>
<th>Test 8</th>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr><tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
<td>f2</td>
<td>g2</td>
<td>h2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
<td>f3</td>
<td>g3</td>
<td>h3</td>
</tr>
<tr>
<td>a4</td>
<td>b4</td>
<td>c4</td>
<td>d4</td>
<td>e4</td>
<td>f4</td>
<td>g4</td>
<td>h4</td>
</tr>
<tr>
<td>a5</td>
<td>b5</td>
<td>c5</td>
<td>d5</td>
<td>e5</td>
<td>f5</td>
<td>g5</td>
<td>h5</td>
</tr>
<tr>
<td>a6</td>
<td>b6</td>
<td>c6</td>
<td>d6</td>
<td>e6</td>
<td>f6</td>
<td>g6</td>
<td>h6</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
$('#stationTypesList').DataTable({
dom: 'Bfrtip',buttons: [ {
extend: 'pdfHtml5',customize: function ( doc ) {
doc.content.splice( 1,{
margin: [ 0,12 ],fontSize: 15
} );
}
} ]
});
</script>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
