本周来了一个新的需求,需要前端生成打印内容,每一项数据占据一张 A4 纸,选择多项就是分多张打印,所以需要打印指定内容区域,并且使用 page-break 来控制打印区域的分页。以前就只使用 CSS 控制过打印时样式,隐藏一些不需要打印的区域,还尝没有试过打印指定区域内容,并且控制打印内容强制分页,所以记录一下。 选择...
属性说明: 设置或获取表明对象后发生换页的字符串。 标签属性:pagebreakbefore 属性说明:设置或获取表明对象前发生换页的字符串。 标签属性:palette 属性说明:获取用于嵌入文档的调色板。 标签属性:parent 属性说明: 获取对象层次中的父窗口。 标签属性:parentElement 属性说明:获取对象层次中的父对象。 标签属性:parentN...
</p> <button onclick="set()" class="btn">Break Page Here</button> <p> Hi! I'm another para element with some dummy text. Hi! I'm another para element with some dummy text. </p> <script> function set() { document.querySelector(".page-break").style.pageBreakAfter = "always"...
Set the pageBreakAfter property: object.style.pageBreakAfter = "auto|always|avoid|emptystring|left|right|initial|inherit" Property Values ValueDescription autoInsert a page break after the element if necessary. This is default alwaysAlways insert a page break after the element ...
@media print { td,tr{ page-break-inside: avoid;} //用于设置是否在指定元素中插入分页,avoid 避免在元素内部插入分页符。 } 想让特定的某个div在新的一页 <button onclick="printFun()">打印</button> <div style="page-break-after:always">我是封面</div> <div style="page-break-after:always...
本例在 id 为 p2 的段落之前设置一个 page-break: <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="setPag...
本例在 id 为 p1 的段落之后设置了一个 page-break: <html> <head> <script type="text/javascript"> function setPageBreak() {document.getElementById("p1").style.pageBreakAfter="always";} </script> </head> <body> <p id="p1">This is a test paragraph.</p> <input type="button" on...
function setPageBreak(){ document.getElementById("footer").style.pageBreakAfter="always"; } </script> </head> <body> <h1>这是个标题</h1> <p>这是一个段落</p> <p id="footer">这是底部段落</p> <button type="button" onclick="setPageBreak()">设置底部段的后一页</button> <p>单...
pageBreakBefore 属性声明一个元素前是否应当放置分页符。 语法: Object.style.pageBreakBefore=auto|always|avoid|left|right 可能的值 实例 本例在 id 为 p2 的段落之前设置一个 page-break: <html><head><script type="text/javascript">functionsetPageBreak(){document.getElementById("p2").style.pageBreak...
function setPageBreak(){ document.getElementById("footer").style.pageBreakInside="avoid"; } </script> </head> <body> <h1>这是个标题</h1> <p>这是一个段落</p> <p id="footer">这是底部段落</p> <button type="button" onclick="setPageBreak()">避免在页脚段落的分页符</button> </bo...