分页打印，只打印指定内容

　　知识点：用CSS控制分页

在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。

在样式中有规定几个打印的样式

page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。

每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，示例中使用的是always。

page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。

page-break-after属性会将分页符号加在指定组件后，而非之前。

　　

　　html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>分页测试</title>
<style type="text/css">
@page{margin:0;}/*此行表示不打印页眉页脚，也不打印页码*/
.A4{page-break-before: always;}/*遇到这个样式则打印分页，不影响网页显示*/
</style>
<script language="javascript" src="test.js"></script>
</head>
<body>
<input type="button" value="打印" onclick="myPrint()" style="float:right;"></input>
<!--startprint-->					<!--从这里开始打印-->
    <div>第一页</div>				<!--第一页不用设置分页符-->
    <div class="A4">第二页</div>		<!--需要分页的地方引入CSS样式-->
<!--endprint-->						<!--到这里结束打印-->
</body>
</html>

　　JS代码：（JS打印指定区域的代码不能写在HTML里，必须通过引用JS文件执行）

function myPrint(str) {
	bdhtml=window.document.body.innerHTML;//获取当前页的html代码
	var sprnstr="<!--startprint-->"
	var eprnstr="<!--endprint-->"
	prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17); //从开始代码向后取html
	prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
	window.document.body.innerHTML=prnhtml;
	window.print();
	window.document.body.innerHTML=bdhtml;
}

　　PHP分页，打印指定区域代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>分页测试</title>
<style type="text/css">
@page{margin:0;}/*此行表示不打印页眉页脚，也不打印页码*/
.A4{page-break-before: always;}/*遇到这个样式则打印分页，不影响网页显示*/
</style>
<script language="javascript" src="test.js"></script>
</head>
<body>
<input type="button" value="打印" onclick="myPrint()" style="float:right;"></input>
<!--startprint-->
<div align='center' style='font-size:24px;'>标题</div>
	<table border='0' cellpadding='0' cellspacing='0' bgcolor='#009900' align='center' width='500'>
		<tr bgcolor='#ffffff' style='line-height:2em;'>
			<td>编号</td>
			<td>内容</td>
		</tr>
<?php
$num_total=369;
$num_per_page=25;
$page_total=ceil($num_total/$num_per_page);
$page_current=1;
for ($i=1;$i<=$num_total;$i++){
	if ($i % $num_per_page == 1 and $i > 1){
		echo "</table>
			<div align='center'>第 $page_current 页，共 $page_total 页</div>
			<div align='center' class='A4' style='font-size:24px;'>标题</div>
			<table border='0' cellpadding='0' cellspacing='0' bgcolor='#009900' align='center' width='500'>
				<tr bgcolor='#ffffff' style='line-height:2em;'>
					<td>编号</td>
					<td>内容</td>
				</tr>";
		$page_current++;
	}
	echo "<tr bgcolor='#ffffff' style='line-height:2em;'>
			<td>$i</td>
			<td>content</td>
		</tr>";
}
?>
	</table>	
<div align='center'>第 <?php echo $page_total;?> 页，共 <?php echo $page_total;?> 页</div>
<!--endprint-->
</body>
</html>

　　建议使用JS打印window.print()时，单独跳出(_blank)一个页面专门用于打印，很清晰

posted on 2019-03-09 23:06  骏歌  阅读(236)  评论(0)    收藏  举报

导航