這次帶給大家如何使用JS實現分頁列印,使用JS實現分頁列印的注意事項有哪些,以下就是實戰案例,一起來看一下。
在呼叫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> <p>This is the first p.</p> <p STYLE="page-break-before:always">This is the second p.</p> <p STYLE="page-break-after:always">This is the third p.</p> <p>This is the fourth p.</p> <p STYLE="page-break-before:right">This is the fifth p.</p> <p STYLE="page-break-after:right">This is the sixth p.</p> <p>This is the last p.</p> </BODY> </HTML>
#描述 | |
##auto | 預設值。如果必要則在元素前面插入分頁符號 |
always | 在元素前面插入分頁符號 |
avoid | 避免在元素前面插入分頁符 |
left | 在元素之前足夠的分頁符,一直到一張空白的左頁為止 |
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實現分頁列印的詳細內容。更多資訊請關注PHP中文網其他相關文章!