如何解决数据表-尝试导出为PDF时未定义的格式错误的表格行单元格未定义
我有下表
<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,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,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时,会出现错误
未捕获的格式错误的表格行未定义单元格
我试图删除colspan并手动将<td></td>
添加到表中最多16个cols,它可以正常工作,但是日期和总计在最后一列中,而不是跨越3列。 / p>
解决方法
要使用colSpan
和rowSpan
导出pdf标头,应为空白覆盖的单元格填充空白单元格。以下代码段将填充空白行,这些行基于头行(
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>
已导出报告的图像
参考文献:
pdfmake documentation
pdfmake playground
相关问题
最新问题
- 我写了这段代码,但我无法理解我的错误
- 在此代码中是否有使用“this”的替代方法?
- 在 SQL Server 和 PostgreSQL 上查询,我如何从第一个表获得第二个表的可视化
- 为什么我的 Onclick 箭头功能在 React 中不起作用?
- java中的random.expovariate()
- 每千个数字得到
- 是否有可能使 loadstring 不可能等于打印?卢阿
- 启动调试会话时出错 - Google Cloud Shell
- 我无法从一个代码实例的列表中删除 None 值,但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场?
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。