打印知识点总结 JS 实现分页打印

其他 2019-06-26 12:04:53 阅读次数: 0

最近在搞打印，分页打印问题困惑较长时间，经过查询资料总结出关于打印相关问题供参考:

一、小票打印问题：直接用的是佳博的小票打印机，型号：GP-L80160，本机windows10

      直接安装打印机驱动即可打印，对应驱动： GAINSCHA 80mm系列打印机驱动程序V18

驱动下载地址：https://pan.baidu.com/s/1-tSKXkowJkm8zICcBeovxw

密码：irdm

安装过程供参考：

 安装完驱动后在设备和打印机里也可以进行设置：

 

 

注意：边距选择“无”则打印出来的小票无边距,字体也会较大。如果选择默认，则边距较大且字体较小。以上使用的是谷歌浏览器!!!

网上找了一个关于打印的html源码：貌似只适用于IE浏览器且IE浏览器要允许使用ActiveX控件，谷歌浏览器点击没有反应。

<!DOCTYPE html>
<html lang="en">
<head>
<title>页面打印</title>
<!--media=print 这个属性在打印时有效 有些不想打印出来的分页打印的都可以应用这类样式进行控制 在非打印时是无效的(可从打印预览中看到效果)-->
<style media=print>
/* 应用这个样式的在打印时隐藏 */
.noPrint {
display: none;
}

/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
.page {
page-break-after: always;   ///这个是分页标识
}
</style>

<!-- 这个是普通样式 -->
<style type="text/css">
.tab td {
border-bottom: 1 solid #000000;
border-left: 1 solid #000000;
border-right: 0 solid #ffffff;
border-top: 0 solid #ffffff;
}

.tab {
border-color: #000000 #000000 #000000 #000000;
border-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 1px;
border-left-width: 1px;
}

.hr {
font-family: "宋体";
font-size: 9pt;
}
</style>
<script language="JavaScript" type="text/JavaScript">
var hkey_root, hkey_path, hkey_key;
hkey_root = "HKEY_CURRENT_USER";
hkey_path = "//Software//Microsoft//Internet Explorer//PageSetup//";
//这个是用来设置打印页眉页脚的，你可以设置为空或者其它
try{
var RegWsh = new ActiveXObject("WScript.Shell");
hkey_key="header";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key, "&w&b页码，&p/&P");
hkey_key="footer";
RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");
}catch(e){
alert(e.description());
}
</script>
</head>
<body bgcolor="white">
<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<thead class="noPrint">
<tr>
<td align="center" colspan="3">
<center class="NoPrint">
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0></OBJECT>
<input type=button value=打印 onclick=document.all.WebBrowser.ExecWB(6,1)>
<input type=button value=直接打印 onclick=document.all.WebBrowser.ExecWB(6,6) />
<input type=button value=页面设置 onclick=document.all.WebBrowser.ExecWB(8,1) />
<input type=button value=打印预览 onclick=document.all.WebBrowser.ExecWB(7,1) />
<!--
关于这个组件还有其他的用法，列举如下：
WebBrowser.ExecWB(1,1) 打开
Web.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口
Web.ExecWB(4,1) 保存网页
Web.ExecWB(6,1) 打印
Web.ExecWB(7,1) 打印预览
Web.ExecWB(8,1) 打印页面设置
Web.ExecWB(10,1) 查看页面属性
Web.ExecWB(15,1) 好像是撤销，有待确认
Web.ExecWB(17,1) 全选
Web.ExecWB(22,1) 刷新
Web.ExecWB(45,1) 关闭窗体无提示
-->
</center>
</td>
</tr>
</thead>
<tr>
<td align="center" colspan="3" style="font-size: 24px">
<b>报告印章申请表</b>
</td>
</tr>
<tr>
<td align="left" colspan="2">编号：A002</td>
<td align="right"></td>
</tr>
<tr>
<td colspan="3">
<table class="tab" cellSpacing="0" cellPadding="0" width="100%">
<tr align="center" height="23">
<td width="10%" height="23"><b>编号</b></td>
<td width="5%"><b>份数</b></td>
<td width="12%"><b>项目/级别编号</b></td>
<td width="12%"><b>单位</b></td>
<td width="12%"><b>项目名称</b></td>
<td width="12%"><b>工程地点</b></td>
<td width="12%"><b>检测项目</b></td>
<td width="7%"><b>单价</b></td>
<td width="8%"><b>数量</b></td>
<td width="10%"><b>总价</b></td>
</tr>
<tr style="font-size: 13px" align="center" height="23">
<td>A14785</td>
<td>5</td>
<td>A1546/8975</td>
<td>中国广东广州</td>
<td>BRT工程</td>
<td>广州天河</td>
<td>BRT工程</td>
<td>￥999999999.99</td>
<td>20</td>
<td>20*￥999999999.99</td>
</tr>
<tr align="center" height="23">
<td colspan="2">备注</td>
<td colspan="8"></td>
</tr>
</table>
</td>
</tr>
</table>
<hr class="noprint" width="100%" size="2"/>
<div class="page"></div>
<table class="tab" cellSpacing="0" cellPadding="0" width="100%">
<tr align="center" height="23">
<td width="10%" height="23"><b>编号</b></td>
<td width="5%"><b>份数</b></td>
<td width="12%"><b>项目/级别编号</b></td>
<td width="12%"><b>单位</b></td>
<td width="12%"><b>项目名称</b></td>
<td width="12%"><b>工程地点</b></td>
<td width="12%"><b>检测项目</b></td>
<td width="7%"><b>单价</b></td>
<td width="8%"><b>数量</b></td>
<td width="10%"><b>总价</b></td>
</tr>
<tr style="font-size: 13px" align="center" height="23">
<td>A14785</td>
<td>5</td>
<td>A1546/8975</td>
<td>中国广东广州</td>
<td>BRT工程</td>
<td>广州天河</td>
<td>BRT工程</td>
<td>￥999999999.99</td>
<td>20</td>
<td>20*￥999999999.99</td>
</tr>
<tr align="center" height="23">
<td colspan="2">备注</td>
<td colspan="8"></td>
</tr>
</table>

<div class="page"></div>
<table class="tab" cellSpacing="0" cellPadding="0" width="100%">
<tr align="center" height="23">
<td width="10%" height="23"><b>编号</b></td>
<td width="5%"><b>份数</b></td>
<td width="12%"><b>项目/级别编号</b></td>
<td width="12%"><b>单位</b></td>
<td width="12%"><b>项目名称</b></td>
<td width="12%"><b>工程地点</b></td>
<td width="12%"><b>检测项目</b></td>
<td width="7%"><b>单价</b></td>
<td width="8%"><b>数量</b></td>
<td width="10%"><b>总价</b></td>
</tr>
<tr style="font-size: 13px" align="center" height="23">
<td>A14785</td>
<td>5</td>
<td>A1546/8975</td>
<td>中国广东广州</td>
<td>BRT工程</td>
<td>广州天河</td>
<td>BRT工程</td>
<td>￥999999999.99</td>
<td>20</td>
<td>20*￥999999999.99</td>
</tr>
<tr align="center" height="23">
<td colspan="2">备注</td>
<td colspan="8"></td>
</tr>
</table>

</body>
</html>

 

 关于分页打印问题总结：主要是应用到了：page-break-after: always;   ///这个是分页标识

写了个打印的服务，webapi调用方式,地址：https://pan.baidu.com/s/10HecSW_72tR0O_6SgdcRmA(密码：d22t)   

1.实现分页打印源码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分页打印</title>
<script type="text/javascript">
//部分打印方法
function doPrint() {
////bdhtml = str;
//console.log(str);
//console.log(window.document.body.innerHTML);
bdhtml = window.document.body.innerHTML;
console.log(bdhtml);
sprnstr = "<!--startprint-->";
eprnstr = "<!--endprint-->";
prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
window.document.body.innerHTML = prnhtml;//页面取到的值实际是传递过来的字符串
window.print();//开始打印
}
</script>
</head>
<body>
<!-- <div style="page-break-after: always" >第一页：这是第一个页的内容<div id="page1"></div></div>
<div style="page-break-after: always" >第二页: 这是第二个页的内容<div><span>早餐券</span></div></div>
<div style="page-break-after: always" >第三页: 这是第三个页的内容</div> -->
</body>
</html>
<!--startprint-->
<div>
<input type="button" value="打印" onclick="doPrint()" />
</div>
<div>
<div style="page-break-after: always"> <!--这是实现分页标记---关键地方，有了它才能实现分页，这是第一页 -->
<div id="bill06_part1">
<div id="bill06_part1_title"><span id="HotelName">备课酒店</span></div >
</div >
<div id="bill06_part2">
<div id="bill06_part2_left"><div id="bill06_part2_title"><span>早餐券</span></div></div>
<div id="bill06_part2_right"><div id="bill06_part2_1_img"></div></div>
</div>
<div id="bill06_part3"><div id="bill06_part3_diningInformation"><div id="bill06_part3_diningInformation_top">
<div class="keyDes"><span>用餐时间:</span></div><div class="valueDes"><span id="BreakFastTime">7:00-9:00</span></div > <br />
<div class="keyDes"><span>Time:</span></div ><div class="valueDes" > <span id="BreakFastTime">7:00-9:00</span></div > <br />
<div class="keyDes"><span>用餐地址:</span></div><br /><div class="keyDes"><span>Address:</span></div><div class="valueDes">
<span id="BreakFastAddress">一楼食堂_千家万户</span></div></div></div>
</div>
<div id="bill06_part4">
<div id="bill06_part4_message">
<div id="bill06_part4_message_title"><span>用餐前请出示此券：</span></div>
<div id="bill06_part4_message_content">
<span>Please show this coupon before ordering</span><br />
</div>
</div>
</div>
<div id="bill06_part5">
<div id="bill06_part5_message"><div id="bill06_part5_message_left"><div class="keyDes_All"><span>券号:</span></div><br />
<div class="keyDes_All_Eng"><span>TicketNo:</span></div>
<div class="valueDes_All_Eng"><span id="TicketNo">vyoxkf5LU9NQX</span></div><br />
<div class="keyDes_All"><span>房号:</span></div><br />
<div class="keyDes_All_Eng"><span>RoomNo:</span></div>
<div class="valueDes_All_Eng"><span id="RoomNo">1203</span></div><br />
<div class="keyDes_All"><span>经办人:</span></div><br />
<div class="keyDes_All_Eng"><span>Print:</span></div><div class="valueDes_All_Eng"><span id="CurrentUser">蒋明春</span></div>
</div><div id="bill06_part5_message_right"><div class="keyDes_All"><span>价格:</span></div><br />
<div class="keyDes_All_Eng"><span>Price:</span></div><div class="valueDes_All_Eng"><span id="Price">10.00</span></div><br />
<div class="keyDes_All"><span>有效期:</span></div><br /><div class="keyDes_All_Eng"><span>Validate:</span></div>
<div class="valueDes_All_Eng"><span id="Validate">2019-06-13</span></div><br /><div class="keyDes_All"><span>打印时间:</span></div><br />
<div class="keyDes_All_Eng"><span>PrintTime:</span></div>
<div class="valueDes_All_Eng"><span id="PrintTime">2019-06-12 20:30:40</span></div></div></div>
</div>
</div>
<div style="page-break-after: always"><!--这是实现分页标记---关键地方，有了它才能实现分页，这是第二页 -->
<div id="bill06_part1">
<div id="bill06_part1_title"><span id="HotelName">备课酒店</span></div >
</div >
<div id="bill06_part2">
<div id="bill06_part2_left"><div id="bill06_part2_title"><span>早餐券</span></div></div>
<div id="bill06_part2_right">
<div id="bill06_part2_1_img">
<div id="bill06_part2_1_img_canvas"></div>
<img id="bill06_part2_1_img_src" />
</div>
</div>
</div>
<div id="bill06_part3"><div id="bill06_part3_diningInformation"><div id="bill06_part3_diningInformation_top">
<div class="keyDes"><span>用餐时间:</span></div><div class="valueDes"><span id="BreakFastTime">7:00-9:00</span></div > <br />
<div class="keyDes"><span>Time:</span></div ><div class="valueDes" > <span id="BreakFastTime">7:00-9:00</span></div > <br />
<div class="keyDes"><span>用餐地址:</span></div><br /><div class="keyDes"><span>Address:</span></div><div class="valueDes">
<span id="BreakFastAddress">一楼食堂_千家万户</span></div></div></div>
</div>
<div id="bill06_part4">
<div id="bill06_part4_message">
<div id="bill06_part4_message_title"><span>用餐前请出示此券：</span></div>
<div id="bill06_part4_message_content">
<span>Please show this coupon before ordering</span><br />
</div>
</div>
</div>
<div id="bill06_part5">
<div id="bill06_part5_message"><div id="bill06_part5_message_left"><div class="keyDes_All"><span>券号:</span></div><br />
<div class="keyDes_All_Eng"><span>TicketNo:</span></div>
<div class="valueDes_All_Eng"><span id="TicketNo">vyoxkf5LU9NQX</span></div><br />
<div class="keyDes_All"><span>房号:</span></div><br />
<div class="keyDes_All_Eng"><span>RoomNo:</span></div>
<div class="valueDes_All_Eng"><span id="RoomNo">1203</span></div><br />
<div class="keyDes_All"><span>经办人:</span></div><br />
<div class="keyDes_All_Eng"><span>Print:</span></div><div class="valueDes_All_Eng"><span id="CurrentUser">蒋明春</span></div>
</div><div id="bill06_part5_message_right"><div class="keyDes_All"><span>价格:</span></div><br />
<div class="keyDes_All_Eng"><span>Price:</span></div><div class="valueDes_All_Eng"><span id="Price">10.00</span></div><br />
<div class="keyDes_All"><span>有效期:</span></div><br /><div class="keyDes_All_Eng"><span>Validate:</span></div>
<div class="valueDes_All_Eng"><span id="Validate">2019-06-13</span></div><br /><div class="keyDes_All"><span>打印时间:</span></div><br />
<div class="keyDes_All_Eng"><span>PrintTime:</span></div>
<div class="valueDes_All_Eng"><span id="PrintTime">2019-06-12 20:30:40</span></div></div></div>
</div>
</div>
</div>
<!--endprint-->

 

 

使用拼接内容打印：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script language="javascript"> 
//打印代码 
function Print() 
{

/////拼接的打印内容
var printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body >"; 
var content = ""; 

var str = document.getElementById('page1').innerHTML; //获取需要打印的页面元素 ，page1元素设置样式page-break-after:always，意思是从下一行开始分割。 
content = content + str; 
str = document.getElementById('page2').innerHTML; //获取需要打印的页面元素 
content = content + str; 

printStr = printStr+content+"</body></html>"; 
var pwin=window.open("Print.htm","print"); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要 
pwin.document.write(printStr); 
pwin.document.close(); //这句很重要，没有就无法实现 
pwin.print(); 
} 
</script> 
</head> 

<body > 
<div><input type="button" value="打印" onclick="Print()" /></div> 
<div id="page1"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > 
<tr><td>第一页打印内容</td></tr> 
</table> 
</div> 
<div id="page2"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="content" > 
<tr><td>第二页打印内容</td></tr> 
</table> 
</div> 
</body> 
</html>

 

 

JS 实现分页打印：转自：https://www.cnblogs.com/wind-wang/p/6902824.html

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

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

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

每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。

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

page-break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。

page-break-before若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。

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

在下列程序中您将可以看到这些属性的设定，

 

复制代码 
<HTML>
　　<HEAD>
　　　　<TITLE>Listing 14-4</TITLE>
　　</HEAD>
　　<BODY>
　　　　<DIV>This is the first DIV.</DIV>
　　　　<DIV STYLE="page-break-before:always">This is the second DIV.</DIV>
　　　　<DIV STYLE="page-break-after:always">This is the third DIV.</DIV>
　　　　<DIV>This is the fourth DIV.</DIV>
　　　　<DIV STYLE="page-break-before:right">This is the fifth DIV.</DIV>
　　　　<DIV STYLE="page-break-after:right">This is the sixth DIV.</DIV>
　　　　<DIV>This is the last DIV.</DIV>
　　</BODY>
</HTML>
复制代码
值 描述
auto 默认值。如果必要则在元素前插入分页符
always 在元素前插入分页符
avoid 避免在元素前插入分页符
left 在元素之前足够的分页符，一直到一张空白的左页为止
right 在元素之前足够的分页符，一直到一张空白的右页为止
inherit 规定应该从父元素继承 page-break-before 属性的设置

在Dom对象中pageBreakBefore属性

语法:

    Object.style.pageBreakBefore=auto|always|avoid|left|right

复制代码 
<html>
　　<head>
　　　　<script type="text/javascript">
　　　　　　function setPageBreak()
　　　　　　{
　　　　　　　　document.getElementById("p2").style.pageBreakBefore="always";
　　　　　　}
　　　　</script>
　　</head>
　　<body>
　　　　<p>This is a test paragraph.</p>
　　　　<input type="button" onclick="setPageBreak()" value="Set page-break" />
　　　　<p id="p2">This is also a test paragraph.</p>
　　</body>
</html>
复制代码

 

 

js控制分页打印、打印分页示例：

转自：https://www.jb51.net/article/46542.htm

代码如下:


<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML> 
<HEAD> 
<TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312" /> 
<style media=print> 
.Noprint{display:none;} 
.PageNext{page-break-after: always;} 
</style> 
<SCRIPT language=javascript> 
　　function printsetup(){ 
　　// 打印页面设置 
　　wb.execwb(8,1); 
　　} 
　　function printpreview(){ 
　　// 打印页面预览 　 
　　wb.execwb(7,1); 
　　} 
　　function printit() 
　　{ 
　　if (confirm('确定打印吗？')) { 
　　wb.execwb(6,6) 
　　} 
　　} 
</SCRIPT> 

</HEAD> 
<BODY> 

<DIV align=center> 
<OBJECT id=wb height=0 width=0 
classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 name=wb></OBJECT> 
<INPUT onclick=javascript:printit() type=button value=打印 name=button_print /> 
<INPUT onclick=javascript:printsetup(); type=button value=打印页面设置 name=button_setup /> 
<INPUT onclick=javascript:printpreview(); type=button value=打印预览 name=button_show /> 
</DIV> 
111</br> 
111</br> 
111</br> 
<div class="PageNext"></div> 
222</br> 
222</br> 
222</br> 
<div class="PageNext"></div> 
333</br> 
333</br> 
333</br> 
<div class="PageNext"></div> 
444</br> 
444</br> 
444</br> 
<div class="PageNext"></div> 
555</br> 
555</br> 
555</br> 
</BODY> 
</HTML> 
复制代码代码如下:

<html> 
<title>JS 分页批量打印解决方案(只支持IE)</title> 
<script language="javascript"> 
function printWithAlert() { 
document.all.WebBrowser.ExecWB(6,1); 
} 
function printWithoutAlert() { 
document.all.WebBrowser.ExecWB(6,6); 
} 
function printSetup() { 
document.all.WebBrowser.ExecWB(8,1); 
} 
function printPrieview() { 
document.all.WebBrowser.ExecWB(7,1); 
} 
function printImmediately() { 
document.all.WebBrowser.ExecWB(6,6); 
window.close(); 
} 
</script> 
<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 style="display:none"> 
</OBJECT> 
</noscript> 
<style media=print> 
.Noprint{display:none;} .PageNext{page-break-after: always;} 
</style> 
<table align="center" class="NOPRINT"> 
<tr> 
<td align="center"><BUTTON title=打印 onclick=printWithAlert()>打印</BUTTON> 
<BUTTON title=直接打印 onclick=printWithoutAlert()>直接打印</BUTTON> 
<input type=button value="打印设置" onClick="printSetup()" > 
<button onclick ='printPrieview()' title='打印预览...' >打印预览</button></td> 
</tr> 
</table> 
<div class="NOPRINT"> 以下为打印区:<br> 
</div> 
<hr size=1 noshadow color=black class="NOPRINT" > 
<table class="PageNext" > 
<tr> 
<td colspan=2> 
第一页的内容 
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 
</td> 
</tr> 
</table> 
<hr size=1 noshadow color=black class="NOPRINT" > 
<div class="PageNext"> 
第二页内容 
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 
</div> 
<hr size=1 noshadow color=black class="NOPRINT" > 
第三页内容 
</html> 

 

 

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

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

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

每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。

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

page-break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。

page-break-before若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。

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

在下列程序中您将可以看到这些属性的设定，

 

复制代码 
<HTML>
　　<HEAD>
　　　　<TITLE>Listing 14-4</TITLE>
　　</HEAD>
　　<BODY>
　　　　<DIV>This is the first DIV.</DIV>
　　　　<DIV STYLE="page-break-before:always">This is the second DIV.</DIV>
　　　　<DIV STYLE="page-break-after:always">This is the third DIV.</DIV>
　　　　<DIV>This is the fourth DIV.</DIV>
　　　　<DIV STYLE="page-break-before:right">This is the fifth DIV.</DIV>
　　　　<DIV STYLE="page-break-after:right">This is the sixth DIV.</DIV>
　　　　<DIV>This is the last DIV.</DIV>
　　</BODY>
</HTML>
复制代码
值 描述
auto 默认值。如果必要则在元素前插入分页符
always 在元素前插入分页符
avoid 避免在元素前插入分页符
left 在元素之前足够的分页符，一直到一张空白的左页为止
right 在元素之前足够的分页符，一直到一张空白的右页为止
inherit 规定应该从父元素继承 page-break-before 属性的设置

在Dom对象中pageBreakBefore属性

语法:

    Object.style.pageBreakBefore=auto|always|avoid|left|right

复制代码 
<html>
　　<head>
　　　　<script type="text/javascript">
　　　　　　function setPageBreak()
　　　　　　{
　　　　　　　　document.getElementById("p2").style.pageBreakBefore="always";
　　　　　　}
　　　　</script>
　　</head>
　　<body>
　　　　<p>This is a test paragraph.</p>
　　　　<input type="button" onclick="setPageBreak()" value="Set page-break" />
　　　　<p id="p2">This is also a test paragraph.</p>
　　</body>
</html>
复制代码

猜你喜欢

转载自www.cnblogs.com/newcapecjmc/p/11088438.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022