我正在研究JAVA EE项目。
我有一个HTML页面（基于JSF 2），我使用PRIMEFACES Framework数据表显示搜索结果列表。数据表非常大（有时超过30列）所以我使它可以水平滚动。我的目的是使这个数据表可打印，所以我可以在每页上有10或15列，具体取决于列的宽度..
PRIMEFACES PRINTER不能满足我的需求。
当我尝试“window.print（）”时，它只打印屏幕上数据表的可见部分。当我将font-size减小到8或更低时，它会在一页上打印所有可数据表内容（一个好点），但结果是不可读的。
我也尝试过使用CSS属性（page-break-before，page-break-inside＆amp; page-break-after）和javascript（JQuery），但它们不起作用。 （我不是很擅长javascript）。
PRIMEFACES“datatable”的HTML输出是一个“表”，在“thead”和“tbody”中只有一个“tr”。 “thead”的“tr”里面有很多“th”，而“tbody”的“tr”里面有很多“td”，我认为这就是为什么我无法做到我所期望的。
以下是我使用的PRIMEFACES数据表的输出（我说得很简单）：
注意：我无法更改数据表结构，因为它取决于PRIMEFACES Framework Datatable。我使用Primefaces 5.0和最新的谷歌Chrome版本作为我的浏览器。
我已经失去了2周寻找解决方案。
//***********************************************************************
//***********************************************************************
// Javascript CODE for printing purpose
//***********************************************************************
//***********************************************************************
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
// ***********************************************************************
function printout(divName) {
var data = document.getElementById(divName).innerHTML;
var newWindow = window.open(null, '', 'height=1000,width=1600');
newWindow.document.open("text/html");
newWindow.document
.write('<style>@media print {@page{size:landscape;}
.page-break { display: block; page-break-before: always;
page-break-inside: avoid; page-break-after: auto; overflow:
visible; } thead { display: table-header-group; }
tfoot { display: table-footer-group;}
body {font-size: 12px; line-height: 1.2;}}
</style><html><head><title></title>');
newWindow.document.write('</head><body >');
newWindow.document.write(data);
newWindow.document.write('</body></html>');
newWindow.document.close();
newWindow.print();
}
// ***********************************************************************
function printAll2(divName) {
var colCount = 0;
$('#' + divName + ' > thead > tr > th').each(function() {
colCount++;
});
// var colCount = 0;
// $('tr:nth-child(1) td').each(function() {
// colCount++;
// });
alert("Ce tableau a : " + colCount + " colonnes !!!");
/*var table = $("#" + divName);*/
var table = $("#XXX");
var tableWidth = table.outerWidth();
alert('000- tableWidth = ' + tableWidth);
var pageWidth = 1400;
var pageCount = Math.ceil(tableWidth / pageWidth);
var printWrap = $("<div></div>").insertAfter(table);
var i;
var printPage;
for (i = 0; i < pageCount; i++) {
printPage = $(
"<table></table><br/>")
.css({
"overflow" : "hidden",
"width" : pageWidth,
"display" : "block",
"page-break-before" : "always",
// "page-break-before" : i === 0 ? "auto" : "always",
"page-break-inside" : "avoid",
"page-break-after" : "always",
"-webkit-region-break-inside" : "avoid"
//
// thead {
// "display": "table-header-group"
// },
// tfoot {
// "display": "table-footer-group"
// }
}).appendTo(printWrap);
table.clone().removeAttr("id").appendTo(printPage).css({
"position" : "relative",
"left" : -i * pageWidth,
});
}
// alert('1- ' + document.getElementById(divName).innerHTML);
// alert('2- ' + table.innerHTML);
table.hide();
$(this).prop("disabled", true);
}
// ***********************************************************************
// If *table* defines <thead> then this function replaces the table with N
// tables separated by a page break. Each new table starts with <thead> and its
// height is at most maxHeight pixels.
//
// *table* must not have the id attribute since it is cloned N-times. Use the
// class attribute instead.
//
function splitTable(table, maxHeight) {
var header = table.children("thead");
if (!header.length)
return;
var headerHeight = header.outerHeight();
var header = header.detach();
var splitIndices = [ 0 ];
var rows = table.children("tbody").children();
maxHeight -= headerHeight;
var currHeight = 0;
rows.each(function(i, row) {
currHeight += $(rows[i]).outerHeight();
if (currHeight > maxHeight) {
splitIndices.push(i);
currHeight = $(rows[i]).outerHeight();
}
});
splitIndices.push(undefined);
table = table.replaceWith('<div id="_split_table_wrapper"></div>');
table.empty();
for (var i = 0; i < splitIndices.length - 1; i++) {
var newTable = table.clone();
header.clone().appendTo(newTable);
$('<tbody />').appendTo(newTable);
rows.slice(splitIndices[i], splitIndices[i + 1]).appendTo(
newTable.children('tbody'));
newTable.appendTo("#_split_table_wrapper");
if (splitIndices[i + 1] !== undefined) {
$(
'<div style="display: block; page-break-before: always;
page-break-inside: avoid; page-break-after: auto;
-webkit-region-break-inside: avoid; margin:0; padding:0;
border: none;"></div>')
.appendTo("#_split_table_wrapper");
}
window.print();
}
}/* CSS CODE */
@CHARSET "UTF-8";
/* //////////////////////////////////////////////////////////////////////// */
body {
margin: 0 auto;
text-align: center;
font-size: 14px;
}
/* //////////////////////////////////////////////////////////////////////// */
@media print {
@page {
/* size: A4;*/
margin: 1.0cm;
size: landscape;
float: none !important;
zoom: 0.5;
}
html, body {
width: 210mm;
height: 297mm;
/*overflow: visible;
font-size: 12px !important;
font-family: Arial;
line-height: 1.2;
width: 100%;
height: auto;
display: block !important;
overflow: visible !important;
*/
}
.page-break {
width: 900px;
display: block;
page-break-before: always !important;
page-break-inside: avoid !important;
page-break-after: auto !important;
/*-webkit-region-break-inside: avoid !important;*/
}
/* table { */
/* overflow: visible; */
/* height: auto; */
/* display: block; */
/* page-break-before: always !important; */
/* page-break-inside: avoid !important; */
/* page-break-after: auto !important; */
/* -webkit-region-break-inside: avoid !important; */
/* border-collapse: separate; */
/* border-spacing: 0; */
/* } */
thead {
/*height: auto;
display: table-header-group;*/
color: blue;
}
tbody {
/* display: table-column; */
/*display: table-row-group;*/
color: green;
}
tfoot {
/*display: table-footer-group;*/
color: red;
}
.primeFaces-dataTable-className {
/* height: auto; */
/*color: #000;
border: 0;
padding: 5px 5px 5px 5px;
border-style: solid;*/
/* border-top: 1px solid red; */
/* border-bottom: 1px solid green; */
/* border-right: 1px solid black; */
/* border-left: 1px solid yellow; */
/* border-width: 1px solid blue; */
/* overflow-y: hidden !important; */
/* overflow-x: hidden !important; */
/* word-wrap: break-word; */
}
/* // */
/* // */
/* th,td { */
/* padding: 10px 15px; */
/* } */
/* td { */
/* border-bottom: 1px solid #cecfd5; */
/* border-right: 1px solid #cecfd5; */
/* padding: 2px 5px 2px 5px; */
/* color: green; */
/* } */
/* td:first-child { */
/* border-left: 1px solid #cecfd5; */
/* } */
/* td:last-child { */
/* page-break-after: auto; */
/* } */
}<!-- HTML CODE -->
<!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<head>
<title>Recherche Par Numéro de Client</title>
<script src="print.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<!-- only, on bottom -->
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<input type="button" onclick="printAll2('#XXX')" value="Print 00" width="40" />
<input type="button" onclick="splitTable($('#XXX'), 500)" value="Print 0" width="40" />
<input type="button" onclick="printDiv('resultatAlisNumeroContratX')" value="Print 1" width="40" />
<input type="button" onclick="printout('resultatAlisNumeroContratX')" value="Print 2" width="40" />
<br />
<br />
<div id="resultatAlisNumeroContratX" class="page-break">
<div id="dataTableAlisNumeroContrat" >
<div class="ui-datatable-tablewrapper">
<table id="XXX" role="grid" border="1">
<thead id="dataTableAlisNumeroContrat_head">
<tr role="row">
<th style="width: 20px"><span>Content Column 01</span></th>
<th style="width: 50px"><span>Column 02</span></th>
<th style="width: 60px"><span>Column 03</span></th>
<th style="width: 150px"><span>Column 04</span></th>
<th style="width: 150px"><span>Column 05</span></th>
<th style="width: 150px"><span>Column 06</span></th>
<th style="width: 130px"><span>Column 07</span></th>
<th style="width: 100px"><span>Column 08</span></th>
<th style="width: 100px"><span>Column 09</span></th>
<th style="width: 130px"><span>Column 10</span></th>
<th style="width: 130px"><span>Column 11</span></th>
<th style="width: 130px"><span>Column 12</span></th>
<th style="width: 100px"><span>Column 13</span></th>
<th style="width: 110px"><span>Column 14</span></th>
<th style="width: 100px"><span>Column 15</span></th>
<th style="width: 120px"><span>Column 16</span></th>
<th style="width: 90px"><span>Column 17</span></th>
<th style="width: 170px"><span>Column 18</span></th>
<th style="width: 110px"><span>Column 19</span></th>
<th style="width: 300px"><span>Column 20</span></th>
<th style="width: 170px"><span>Column 21</span></th>
<th style="width: 300px"><span>Column 22</span></th>
<th style="width: 300px"><span>Column 23</span></th>
<th style="width: 300px"><span>Column 24</span></th>
<th style="width: 300px"><span>Column 25</span></th>
<th style="width: 300px"><span>Column 26</span></th>
<th style="width: 300px"><span>Column 27</span></th>
<th style="width: 300px"><span>Column 28</span></th>
<th style="width: 300px"><span>Column 29</span></th>
<th style="width: 300px"><span>Column 30</span></th>
<th style="width: 170px"><span>Column 31</span></th>
<th style="width: 300px"><span>Column 32</span></th>
<th style="width: 300px"><span>Column 33</span></th>
<th style="width: 300px"><span>Column 34</span></th>
<th style="width: 300px"><span>Column 35</span></th>
<th style="width: 300px"><span>Column 36</span></th>
<th style="width: 300px"><span>Column 37</span></th>
<th style="width: 300px"><span>Column 38</span></th>
<th style="width: 300px"><span>Column 39</span></th>
<th style="width: 300px"><span>Column 40</span></th>
<th style="width: 170px"><span>Column 41</span></th>
<th style="width: 300px"><span>Column 42</span></th>
<th style="width: 300px"><span>Column 43</span></th>
<th style="width: 300px"><span>Column 44</span></th>
<th style="width: 300px"><span>Column 45</span></th>
<th style="width: 300px"><span>Column 46</span></th>
<th style="width: 300px"><span>Column 47</span></th>
<th style="width: 300px"><span>Column 48</span></th>
<th style="width: 300px"><span>Column 49</span></th>
<th style="width: 300px"><span>Column 50</span></th>
<th style="width: 170px"><span>Column 51</span></th>
<th style="width: 300px"><span>Column 52</span></th>
<th style="width: 300px"><span>Column 53</span></th>
<th style="width: 300px"><span>Column 54</span></th>
<th style="width: 300px"><span>Column 55</span></th>
<th style="width: 300px"><span>Column 56</span></th>
<th style="width: 300px"><span>Column 57</span></th>
<th style="width: 300px"><span>Column 58</span></th>
<th style="width: 300px"><span>Column 59</span></th>
<th style="width: 300px"><span>Column 60</span></th>
</tr>
</thead>
<tfoot id="dataTableAlisNumeroContrat_foot"></tfoot>
<tbody id="dataTableAlisNumeroContrat_data" class="ui-datatable-data ui-widget-content">
<tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row">
<td>Content Column 01</td>
<td>Content Column 02</td>
<td>Content Column 03</td>
<td>Content Column 04</td>
<td>Content Column 05</td>
<td>Content Column 06</td>
<td>Content Column 07</td>
<td>Content Column 08</td>
<td>Content Column 09</td>
<td>Content Column 10</td>
<td>Content Column 11</td>
<td>Content Column 12</td>
<td>Content Column 13</td>
<td>Content Column 14</td>
<td>Content Column 15</td>
<td>Content Column 16</td>
<td>Content Column 17</td>
<td>Content Column 18</td>
<td>Content Column 19</td>
<td>Content Column 20</td>
<td>Content Column 21</td>
<td>Content Column 22</td>
<td>Content Column 23 <br/> CommencementDate = 2014-03-20 <br />InsuranceCompany = 8 <br />PolicyNoKey
= 02 <br />TypeDenouement = 0</td>
<td>Content Column 24 <br/> ActivityInstructionDate = 2014-05-27</td>
<td>Content Column 25 <br/> ActivityName = Nouvelle offre <br />LastUpdatedRegDate = 2002-09-09 <br /> <br />ActivityCode = 4014 <br />ActivityName = MAJ
Cotisation - Vers. Unique - Rétro <br />LastUpdatedRegDate = 2000-05-31 <br /> <br />ActivityCode = 750 <br />ActivityName = Repartition
<br />LastUpdatedRegDate = 2003-09-02 <br /> <br />ActivityCode = 652 <br />ActivityName = Mouvement partiel - Versement libre <br />LastUpdatedRegDate
= 1980-01-01 <br /> <br />ActivityCode = 750 <br />ActivityName = Repartition <br />LastUpdatedRegDate = 2003-09-02 <br /> <br /></td>
<td>Content Column 26</td>
<td>Content Column 27</td>
<td>Content Column 28</td>
<td>Content Column 29</td>
<td>Content Column 30</td>
<td>Content Column 31</td>
<td>Content Column 32</td>
<td>Content Column 33</td>
<td>Content Column 34</td>
<td>Content Column 35</td>
<td>Content Column 36</td>
<td>Content Column 37</td>
<td>Content Column 38</td>
<td>Content Column 39</td>
<td>Content Column 40</td>
<td>Content Column 41</td>
<td>Content Column 42>/td>
<td>Content Column 43</td>
<td>Content Column 44</td>
<td>Content Column 45</td>
<td>Content Column 46</td>
<td>Content Column 47</td>
<td>Content Column 48 <br/> Gender = 1 <br />JuridicallyUnableCode = 0 <br />LifeStatus = 0</td>
<td>Content Column 49 <br/> CommencementDate = 2014-03-20 <br />InsuranceCompany = 8 <br />PolicyNoKey
= 02 <br />TypeDenouement = 0</td>
<td>Content Column 50</td>
<td>Content Column 51</td>
<td>Content Column 52</td>
<td>Content Column 53</td>
<td>Content Column 54</td>
<td>Content Column 55</td>
<td>Content Column 56</td>
<td>Content Column 57</td>
<td>Content Column 58</td>
<td>Content Column 59</td>
<td>Content Column 60</td>
</tr>
</tbody>
</table>
<table class='tmp_table'>
</table>
</div>
</div>
</div>
</body>
</html>