JS 實現分頁打印


在調用window.print()時,可以實現打印效果,但內容太多時要進行分頁打印。

在樣式中有規定幾個打印的樣式

page-break-beforepage-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>

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM