首頁 > web前端 > js教程 > 主體

如何使用JS實現分頁列印

php中世界最好的语言
發布: 2018-05-29 10:40:00
原創
3002 人瀏覽過

這次帶給大家如何使用JS實現分頁列印,使用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>
    <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在元素之前足夠的分頁符,一直到一張空白的左頁為止
#描述

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>
登入後複製
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ######推薦閱讀:#########如何處理Mac安裝thrift因bison報錯###############如何正確處理淘寶cnpm安裝後cnpm不是內部或外部命令#########

以上是如何使用JS實現分頁列印的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!