快捷導(dǎo)航

JS 實(shí)現(xiàn)分頁(yè)打印功能

更新時(shí)間：2018年05月16日 16:49:07 作者：折翼的飛鳥

這篇文章主要介紹了JS 實(shí)現(xiàn)分頁(yè)打印功能的相關(guān)資料,需要的朋友可以參考下

在調(diào)用window.print()時(shí)，可以實(shí)現(xiàn)打印效果，但內(nèi)容太多時(shí)要進(jìn)行分頁(yè)打印。

在樣式中有規(guī)定幾個(gè)打印的樣式

page-break-before和page-break-after CSS屬性并不會(huì)修改網(wǎng)頁(yè)在屏幕上的顯示，這兩個(gè)屬性是用來(lái)控制文件的打印方式。

每個(gè)打印屬性都可以設(shè)定4種設(shè)定值：auto、always、left和right。其中Auto是默認(rèn)值，只有在有需要時(shí)，才需設(shè)定分頁(yè)符號(hào) (Page breaks)。

page-break-before若設(shè)定成always，則是在遇到特定的組件時(shí)，打印機(jī)會(huì)重新開始一個(gè)新的打印頁(yè)。

page-break-before若設(shè)定成left，則會(huì)插入分頁(yè)符號(hào)，直到指定的組件出現(xiàn)在一個(gè)左邊的空白頁(yè)上。

page-break-before若設(shè)定成right，則會(huì)插入分頁(yè)符號(hào)，直到指定的組件出現(xiàn)在一個(gè)右邊的空白頁(yè)上。

page-break-after屬性會(huì)將分頁(yè)符號(hào)加在指定組件后，而非之前。

在下列程序中您將可以看到這些屬性的設(shè)定，

<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	默認(rèn)值。如果必要?jiǎng)t在元素前插入分頁(yè)符
always	在元素前插入分頁(yè)符
avoid	避免在元素前插入分頁(yè)符
left	在元素之前足夠的分頁(yè)符，一直到一張空白的左頁(yè)為止
right	在元素之前足夠的分頁(yè)符，一直到一張空白的右頁(yè)為止
inherit	規(guī)定應(yīng)該從父元素繼承 page-break-before 屬性的設(shè)置

在Dom對(duì)象中pageBreakBefore屬性

語(yǔ)法:

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>

總結(jié)

以上所述是小編給大家介紹的JS 實(shí)現(xiàn)分頁(yè)打印功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: