如何使用分页符打印HTML表格（使用thead，tbody，tfoot）？

时间：2015-03-12 15:22:43

标签： javascript jquery css printing page-break

我正在研究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>

0 个答案:

没有答案
相关问题
最新问题