我正在为我的表格 pdf 使用 jsPDF AutoTable 插件。
我的消息来源:
#javaScriptIncludeTag("jspdf.min.js")#
#javaScriptIncludeTag("jspdf.plugin.autotable.js")#
我的资料来自:
https://github.com/MrRio/jsPDF
https://github.com/simonbengtsson/jsPDF-AutoTable
我的脚本:
$(function() {
var doc = new jsPDF('p', 'pt', 'a4');
var $tables2 = $(".pdftable2");
var startingY = 0;
$tables2.each(function( index ) {
var $this = $(this), tableid = $this.attr('id');
var res = doc.autoTableHtmlToJson(document.getElementById(tableid));
var offset = 2;
startingY = doc.autoTableEndPosY() + offset;
doc.autoTable(res.columns, res.data, {
startY: startingY,
pageBreak: 'avoid',
theme: 'grid',
styles: {
overflow: 'linebreak',
fontSize: 12,
valign: 'middle'
},
columnStyles: {
0: {valign: "top"},
1: {
columnWidth: 20,
fontStyle: 'bold',
halign: 'center',
},
2: {
columnWidth: 20,
fontStyle: 'bold',
halign: 'center',
},
3: {
columnWidth: 20,
fontStyle: 'bold',
halign: 'center',
},
}
});
});
doc.save('pdf doc');
});
我的标记:
<table class="pdftable2" id="j_info" border="1">
<tr>
<th>Group Name</th>
<th>Yes</th>
<th>NA</th>
<th>No</th>
</tr>
<tr>
<td colspan="4">Sub Group name</td>
</tr>
<tr>
<td>
Phasellus sagittis tristique augue
</td>
<td></td>
<td>X</td>
<td></td>
</tr>
</table>
我的标题是组名,第二行是子组名。我想用子组定位第二行并给出独特的风格。我如何定位整行。下面是我的桌子的样子。
重要提示:任何 css 样式都不会影响 pdf 的外观。我对 pdf 的外观感兴趣,而不是浏览器中实际页面的外观。无论如何,可以隐藏整个表格,但 jspdf AutoTable 仍会将其呈现为 pdf。