数据 tables - 未捕获格式错误 table 行,尝试导出为 PDF 时单元格未定义
Datatables - uncaught malformed table row a cell is undefined when trying to export to PDF
我有以下 table,
<table id="dtBasicExample" class="table table-bordered" style="border : none;">
<thead class="text-info" style="border : none;">
<tr>
<th colspan="16" style="border : none;"></th>
</tr>
<tr>
<th colspan="2" class="text-right" style="border : none;">Date</th>
<th colspan="14" style="border : none;">: <%=dstart%> - <%=dend%></th>
</tr>
<tr>
<th colspan="2" class="text-right" style="border:none;">Personel</th>
<th colspan="14" style="border : none;">: <%=pers%></th>
</tr>
<tr>
<th colspan="2" class="text-right" style="border:none;">Grade</th>
<th colspan="14" style="border : none;">: <%=grade%></th>
</tr>
<tr>
<th colspan="2" class="text-right" style="border:none;">Date Generated</th>
<th colspan="14" style="border : none;">: <%=nowdate %></th>
</tr>
<tr>
<th colspan="16" style="border-left : none; border-right: none;"/>
</tr>
<tr class="text-center">
<th rowspan="3">Date</th>
<th colspan="14">Number of Students</th>
<th rowspan="3">Grand Total</th>
</tr>
<tr class="text-center">
<th colspan="7">Class A</th>
<th colspan="7">Class B</th>
</tr>
<tr class="text-center">
<th style="width:6.2%;">Eng</th>
<th style="width:6.2%;">BM</th>
<th style="width:6.2%;">Man</th>
<th style="width:6.2%;">SC</th>
<th style="width:6.2%;">PHY</th>
<th style="width:6.2%;">CHE</th>
<th style="width:6.2%;">Sum</th>
<th style="width:6.2%;">Eng</th>
<th style="width:6.2%;">BM</th>
<th style="width:6.2%;">Man</th>
<th style="width:6.2%;">SC</th>
<th style="width:6.2%;">PHY</th>
<th style="width:6.2%;">CHE</th>
<th style="width:6.2%;">Sum</th>
</tr>
</thead>
...
下面是我导出 PDF 的 js。
{
action: function (e, dt, button, config) {
showNotification('top', 'right', 'PDF exported sucessfully!');
$.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, button, config);
},
extend: 'pdf',
className: 'btn-info btnspaces',
text: 'Export to PDF',
filename: 'Students',
orientation: 'landscape',
pageSize: 'LEGAL',
customize: function (pdf) {
var firstHeaderRow = [];
var secondHeaderRow = [];
//11
$('#dtBasicExample').find("thead>tr:nth-child(7)>th").each(
function (index, element) {
var colSpan = element.getAttribute("colspan");
var rowSpan = element.getAttribute("rowspan");
firstHeaderRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan,
rowSpan: rowSpan
});
for (var i = 0; i < colSpan - 1; i++) {
firstHeaderRow.push({});
}
});
//10
$('#dtBasicExample').find("thead>tr:nth-child(8)>th").each(
function (index, element) {
var colSpan = element.getAttribute("colspan");
var rowSpan = element.getAttribute("rowspan");
secondHeaderRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan,
rowSpan: rowSpan
});
for (var i = 0; i < colSpan - 1; i++) {
secondHeaderRow.push({});
}
});
pdf.content[1].table.headerRows = 3;
var objLayout = {};
objLayout['hLineWidth'] = function (i) {
return .5;
};
objLayout['vLineWidth'] = function (i) {
return .5;
};
objLayout['hLineColor'] = function (i) {
return 'black';
};
objLayout['vLineColor'] = function (i) {
return 'black';
};
objLayout['paddingTop'] = function (i) {
return 5;
};
objLayout['paddingBottom'] = function (i) {
return 5;
};
objLayout['paddingLeft'] = function (i) {
return 9;
};
objLayout['paddingRight'] = function (i) {
return 9;
};
pdf.content[1].table.body.unshift(secondHeaderRow);
pdf.content[1].table.body.unshift(firstHeaderRow);
pdf.content[1].layout = objLayout;
}
我可以将它导出到 excel,但是当我尝试将它导出到 PDF 时,出现错误
uncaught malformed table row a cell is undefined
我尝试删除 colspan 并手动将 <td></td>
添加到 table 中,最多 16 列,它工作正常,但日期和总计在最后一列而不是跨越 3 列。
要使用 colSpan
和 rowSpan
导出 pdf header,应为 span 覆盖的单元格填充空单元格。以下代码片段将根据标题行 (
) 的 colSpan
和 rowSpan
填充空单元格。
由于Download in Sandboxed Iframes (removed),代码段中的按钮将无法使用,您可以将以下代码复制到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',
buttons: [{
extend: 'pdf',
download: 'download',
text: 'Export to PDF',
filename: 'Students',
orientation: 'landscape',
pageSize: 'LEGAL',
customize: function(pdfDocument) {
let headerRows = [];
let noOfColumn = 16;
let rowSpansOfColumns = [];
for (let i = 0; i < noOfColumn; i++) {
rowSpansOfColumns.push([]);
}
let noOfExtraHeaderRow = 3;
pdfDocument.content[1].table.headerRows = noOfExtraHeaderRow + 1;
for (let i = 1; i <= noOfExtraHeaderRow; i++) {
let headerRow = [];
let colIdx = 0;
while (colIdx < rowSpansOfColumns.length && rowSpansOfColumns[colIdx].includes(i)) {
headerRow.push({});
colIdx++
}
$('#dataTable').find("thead>tr:nth-child(" + i + ")>th").each(
function(index, element) {
let colSpan = parseInt(element.getAttribute("colSpan"));
let rowSpan = parseInt(element.getAttribute("rowSpan"));
if (rowSpan > 1) {
for (let col = colIdx; col < colIdx + colSpan; col++) {
for (let row = i + 1; row < i + rowSpan; row++) {
rowSpansOfColumns[col].push(row);
}
}
}
headerRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan,
rowSpan: rowSpan
});
colIdx++
for (let j = 0; j < colSpan - 1; j++) {
headerRow.push({});
colIdx++
}
while (colIdx < rowSpansOfColumns.length && rowSpansOfColumns[colIdx].includes(i)) {
headerRow.push({});
colIdx++
}
});
headerRows.push(headerRow);
}
for (let i = 0; i < headerRows.length; i++) {
pdfDocument.content[1].table.body.unshift(headerRows[headerRows.length - 1 - i]);
}
}
}]
});
});
</script>
<table id="dataTable" cellspacing="0" width="auto">
<thead>
<tr>
<th colspan="16" style="border-left : none; border-right: none;"></th>
</tr>
<tr class="text-center">
<th rowspan="3">Date</th>
<th colspan="14">Number of Students</th>
<th rowspan="3">Grand Total</th>
</tr>
<tr class="text-center">
<th colspan="7">Class A</th>
<th colspan="7">Class B</th>
</tr>
<tr class="text-center">
<th style="width:6.2%;">Eng</th>
<th style="width:6.2%;">BM</th>
<th style="width:6.2%;">Man</th>
<th style="width:6.2%;">SC</th>
<th style="width:6.2%;">PHY</th>
<th style="width:6.2%;">CHE</th>
<th style="width:6.2%;">Sum</th>
<th style="width:6.2%;">Eng</th>
<th style="width:6.2%;">BM</th>
<th style="width:6.2%;">Man</th>
<th style="width:6.2%;">SC</th>
<th style="width:6.2%;">PHY</th>
<th style="width:6.2%;">CHE</th>
<th style="width:6.2%;">Sum</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020/10/11</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>85</td>
<td>25</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>85</td>
<td>25</td>
<td>100</td>
</tr>
<tr>
<td>2020/11/11</td>
<td>53</td>
<td>63</td>
<td>73</td>
<td>83</td>
<td>93</td>
<td>83</td>
<td>23</td>
<td>53</td>
<td>63</td>
<td>73</td>
<td>83</td>
<td>93</td>
<td>83</td>
<td>26</td>
<td>100</td>
</tr>
</tbody>
</table>
导出报告的图片
我有以下 table,
<table id="dtBasicExample" class="table table-bordered" style="border : none;">
<thead class="text-info" style="border : none;">
<tr>
<th colspan="16" style="border : none;"></th>
</tr>
<tr>
<th colspan="2" class="text-right" style="border : none;">Date</th>
<th colspan="14" style="border : none;">: <%=dstart%> - <%=dend%></th>
</tr>
<tr>
<th colspan="2" class="text-right" style="border:none;">Personel</th>
<th colspan="14" style="border : none;">: <%=pers%></th>
</tr>
<tr>
<th colspan="2" class="text-right" style="border:none;">Grade</th>
<th colspan="14" style="border : none;">: <%=grade%></th>
</tr>
<tr>
<th colspan="2" class="text-right" style="border:none;">Date Generated</th>
<th colspan="14" style="border : none;">: <%=nowdate %></th>
</tr>
<tr>
<th colspan="16" style="border-left : none; border-right: none;"/>
</tr>
<tr class="text-center">
<th rowspan="3">Date</th>
<th colspan="14">Number of Students</th>
<th rowspan="3">Grand Total</th>
</tr>
<tr class="text-center">
<th colspan="7">Class A</th>
<th colspan="7">Class B</th>
</tr>
<tr class="text-center">
<th style="width:6.2%;">Eng</th>
<th style="width:6.2%;">BM</th>
<th style="width:6.2%;">Man</th>
<th style="width:6.2%;">SC</th>
<th style="width:6.2%;">PHY</th>
<th style="width:6.2%;">CHE</th>
<th style="width:6.2%;">Sum</th>
<th style="width:6.2%;">Eng</th>
<th style="width:6.2%;">BM</th>
<th style="width:6.2%;">Man</th>
<th style="width:6.2%;">SC</th>
<th style="width:6.2%;">PHY</th>
<th style="width:6.2%;">CHE</th>
<th style="width:6.2%;">Sum</th>
</tr>
</thead>
...
下面是我导出 PDF 的 js。
{
action: function (e, dt, button, config) {
showNotification('top', 'right', 'PDF exported sucessfully!');
$.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, button, config);
},
extend: 'pdf',
className: 'btn-info btnspaces',
text: 'Export to PDF',
filename: 'Students',
orientation: 'landscape',
pageSize: 'LEGAL',
customize: function (pdf) {
var firstHeaderRow = [];
var secondHeaderRow = [];
//11
$('#dtBasicExample').find("thead>tr:nth-child(7)>th").each(
function (index, element) {
var colSpan = element.getAttribute("colspan");
var rowSpan = element.getAttribute("rowspan");
firstHeaderRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan,
rowSpan: rowSpan
});
for (var i = 0; i < colSpan - 1; i++) {
firstHeaderRow.push({});
}
});
//10
$('#dtBasicExample').find("thead>tr:nth-child(8)>th").each(
function (index, element) {
var colSpan = element.getAttribute("colspan");
var rowSpan = element.getAttribute("rowspan");
secondHeaderRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan,
rowSpan: rowSpan
});
for (var i = 0; i < colSpan - 1; i++) {
secondHeaderRow.push({});
}
});
pdf.content[1].table.headerRows = 3;
var objLayout = {};
objLayout['hLineWidth'] = function (i) {
return .5;
};
objLayout['vLineWidth'] = function (i) {
return .5;
};
objLayout['hLineColor'] = function (i) {
return 'black';
};
objLayout['vLineColor'] = function (i) {
return 'black';
};
objLayout['paddingTop'] = function (i) {
return 5;
};
objLayout['paddingBottom'] = function (i) {
return 5;
};
objLayout['paddingLeft'] = function (i) {
return 9;
};
objLayout['paddingRight'] = function (i) {
return 9;
};
pdf.content[1].table.body.unshift(secondHeaderRow);
pdf.content[1].table.body.unshift(firstHeaderRow);
pdf.content[1].layout = objLayout;
}
我可以将它导出到 excel,但是当我尝试将它导出到 PDF 时,出现错误
uncaught malformed table row a cell is undefined
我尝试删除 colspan 并手动将 <td></td>
添加到 table 中,最多 16 列,它工作正常,但日期和总计在最后一列而不是跨越 3 列。
要使用 colSpan
和 rowSpan
导出 pdf header,应为 span 覆盖的单元格填充空单元格。以下代码片段将根据标题行 (
colSpan
和 rowSpan
填充空单元格。
由于Download in Sandboxed Iframes (removed),代码段中的按钮将无法使用,您可以将以下代码复制到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',
buttons: [{
extend: 'pdf',
download: 'download',
text: 'Export to PDF',
filename: 'Students',
orientation: 'landscape',
pageSize: 'LEGAL',
customize: function(pdfDocument) {
let headerRows = [];
let noOfColumn = 16;
let rowSpansOfColumns = [];
for (let i = 0; i < noOfColumn; i++) {
rowSpansOfColumns.push([]);
}
let noOfExtraHeaderRow = 3;
pdfDocument.content[1].table.headerRows = noOfExtraHeaderRow + 1;
for (let i = 1; i <= noOfExtraHeaderRow; i++) {
let headerRow = [];
let colIdx = 0;
while (colIdx < rowSpansOfColumns.length && rowSpansOfColumns[colIdx].includes(i)) {
headerRow.push({});
colIdx++
}
$('#dataTable').find("thead>tr:nth-child(" + i + ")>th").each(
function(index, element) {
let colSpan = parseInt(element.getAttribute("colSpan"));
let rowSpan = parseInt(element.getAttribute("rowSpan"));
if (rowSpan > 1) {
for (let col = colIdx; col < colIdx + colSpan; col++) {
for (let row = i + 1; row < i + rowSpan; row++) {
rowSpansOfColumns[col].push(row);
}
}
}
headerRow.push({
text: element.innerHTML,
style: "tableHeader",
colSpan: colSpan,
rowSpan: rowSpan
});
colIdx++
for (let j = 0; j < colSpan - 1; j++) {
headerRow.push({});
colIdx++
}
while (colIdx < rowSpansOfColumns.length && rowSpansOfColumns[colIdx].includes(i)) {
headerRow.push({});
colIdx++
}
});
headerRows.push(headerRow);
}
for (let i = 0; i < headerRows.length; i++) {
pdfDocument.content[1].table.body.unshift(headerRows[headerRows.length - 1 - i]);
}
}
}]
});
});
</script>
<table id="dataTable" cellspacing="0" width="auto">
<thead>
<tr>
<th colspan="16" style="border-left : none; border-right: none;"></th>
</tr>
<tr class="text-center">
<th rowspan="3">Date</th>
<th colspan="14">Number of Students</th>
<th rowspan="3">Grand Total</th>
</tr>
<tr class="text-center">
<th colspan="7">Class A</th>
<th colspan="7">Class B</th>
</tr>
<tr class="text-center">
<th style="width:6.2%;">Eng</th>
<th style="width:6.2%;">BM</th>
<th style="width:6.2%;">Man</th>
<th style="width:6.2%;">SC</th>
<th style="width:6.2%;">PHY</th>
<th style="width:6.2%;">CHE</th>
<th style="width:6.2%;">Sum</th>
<th style="width:6.2%;">Eng</th>
<th style="width:6.2%;">BM</th>
<th style="width:6.2%;">Man</th>
<th style="width:6.2%;">SC</th>
<th style="width:6.2%;">PHY</th>
<th style="width:6.2%;">CHE</th>
<th style="width:6.2%;">Sum</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020/10/11</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>85</td>
<td>25</td>
<td>50</td>
<td>60</td>
<td>70</td>
<td>80</td>
<td>90</td>
<td>85</td>
<td>25</td>
<td>100</td>
</tr>
<tr>
<td>2020/11/11</td>
<td>53</td>
<td>63</td>
<td>73</td>
<td>83</td>
<td>93</td>
<td>83</td>
<td>23</td>
<td>53</td>
<td>63</td>
<td>73</td>
<td>83</td>
<td>93</td>
<td>83</td>
<td>26</td>
<td>100</td>
</tr>
</tbody>
</table>
导出报告的图片