DataTable，导出到pdf不能与两个标题和colspan一起正常工作 [英] DataTable, export to pdf is not working properly with two headers and colspan
问题描述
我正在使用数据表来显示我的数据，并且想将它们导出为pdf。
我按照
下图显示了该表，导出到pdf
后显示
那么，如何使用数据表在pdf中获取两个标题？
预先表示感谢。
pdf导出功能目前仅考虑1行列标题，因此只导出一个标题行。
为了导出两个标题行，我们可以使用自定义选项，该选项位于 pdf 导出按钮中。此选项使我们可以在导出之前操作pdf文档对象。通过引用 pdfmake 文档和游乐场对于表格，我们可以看到需要进行以下更改才能具有多个表格标题行。
- 将表的
headerRows（无标题行）设置为2。 - 将缺少的标题行插入pdf表
body的第一行，因为给定的标题行单元格具有col-Span，因此需要添加空单元格
下面的代码段演示了上述更改。
由于在沙盒iframe中下载（已删除），该代码段将不起作用，您可以将以下代码复制到html文件，然后使用浏览器打开文件以查看效果。
< script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>
< link rel = stylesheet type = text / css href = https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b- 1.6.2 / b-flash-1.6.2 / b-html5-1.6.2 / b-print-1.6.2 / datatables.min.css />
< script type = text / javascript src = https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js>< ; / script>
< script type = text / javascript src = https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js>< / script>
< script type = text / javascript src = https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b -flash-1.6.2 / b-html5-1.6.2 / b-print-1.6.2 / datatables.min.js< / script>
< script type = text / javascript>
$（document）.ready（function（）{
$（'＃dataTable'）。DataTable（{
dom：'Bfrtip'，
按钮：[
'复制'，{
扩展名：'csv'，
下载：下载
}，{
扩展名：'excel'，
下载：'download'
}，{
扩展名：'pdf'，
文本：'具有两个行标题的导出'，
下载：'download'，
自定义：function（pdfDocument）{
pdfDocument.content [1] .table.headerRows = 2;
var firstHeaderRow = [];
$（'＃dataTable'）。find（ thead> ; tr：first-child> th）。each（
function（index，element）{
var colSpan = element.getAttribute（ colSpan）;
firstHeaderRow.push（{
文字：element.innerHTML，
样式： tableHeader，
colSpan：colSpan
}）;
对于（var i = 0;我< colSpan-1; i ++）{
firstHeaderRow.push（{}）;
}
}）；
pdfDocument.content [1] .table.body.unshift（firstHeaderRow）;
}
}，{
扩展名：'print'，
下载：'download'
}
]
} ）;
}）；
< / script>
< table id = dataTable cellspacing = 0 width = auto>
< thead>
< tr>
< th colspan = 3< / th>
< th colspan = 3> IMP值
< / tr>
< tr>
< th< / th>
ththPosition / th;
< th> Office< / th>
th年龄/ th
<开始日期< / th
thalary / th
< / tr>
< / thead>
< tbody>
< tr>
< td>老虎尼克松< / td>
< td>系统架构师< / td>
< td>爱丁堡< / td>
< td> 61< / td>
< td> 2011/04/25< / td>
< td> $ 320,800< / td>
< / tr>
< tr>
< td> Garrett Winters< / td>
< td>会计< / td>
< td>东京< / td>
< td> 63< / td>
< td> 2011/07/25< / td>
< td> $ 170,750< / td>
< / tr>
< / tbody>
< / table>
I am using a data table to display my data and I want to export them to pdf.
I followed steps listed in example given in this link.
I am having a table in which I want two headers and out the two headers, one header having colspan i.e. as shown below
<th colspan=3>
So, when I try to export the table to pdf, it gives me only one header and that too having full column description. My code snippet with all the required CSS and JS files is as below:
<link href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dataTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
<table id="dataTable" cellspacing="0" width="auto">
<thead>
<tr>
<th colspan = 3></th>
<th colspan = 3>IMP values</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
The image below shows, table as seen in the browser
The image below shows, table as seen after exported to pdf
So, how can I get two headers in pdf using data table?
Thanks in advance.
The pdf exporting function currently only consider 1 row of column header, hence only one header row is exported.
In order to export with two header rows, we can make use of the customize option provided in the pdf export button. This option allow us to manipulate the pdf document object before export. By referring pdfmake documentation and the playground for table, we can see that the following changes are required to have more than one table header row.
- Set the
headerRows(no of header row) of the table to 2. - Insert the missing header row to the first of the pdf table
body, as the header row cell given has col-Span, empty cell need to add to the header row to ensure each row have the same number of cells.
The following code snippet demonstrates the above changes.
Due to Download in Sandboxed Iframes (removed), the button in the code snippet will not work, you may copy the following code to an html file, and open the file with a browser to see the effect.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#dataTable').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', {
extend: 'csv',
"download": "download"
}, {
extend: 'excel',
"download": 'download'
}, {
extend: 'pdf',
text: 'Export with two row headers',
download: 'download',
customize: function(pdfDocument) {
pdfDocument.content[1].table.headerRows = 2;
var firstHeaderRow = [];
$('#dataTable').find("thead>tr:first-child>th").each(
function(index, element) {
var colSpan = element.getAttribute("colSpan");
firstHeaderRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan
});
for (var i = 0; i < colSpan - 1; i++) {
firstHeaderRow.push({});
}
});
pdfDocument.content[1].table.body.unshift(firstHeaderRow);
}
}, {
extend: 'print',
download: 'download'
}
]
});
});
</script>
<table id="dataTable" cellspacing="0" width="auto">
<thead>
<tr>
<th colspan=3></th>
<th colspan=3>IMP values</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
这篇关于DataTable，导出到pdf不能与两个标题和colspan一起正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
