ฉันสามารถบังคับให้ตัวแบ่งหน้าในการพิมพ์ HTML ได้หรือไม่

ฉันกำลังสร้างรายงาน HTML ที่กำลังจะพิมพ์ได้และมี "ส่วน" ที่ควรเริ่มในหน้าใหม่

มีวิธีใดบ้างที่จะใส่บางสิ่งใน HTML / CSS ที่จะส่งสัญญาณไปยังเบราว์เซอร์ที่ต้องการบังคับให้ตัวแบ่งหน้า (เริ่มหน้าใหม่) ณ จุดนั้น

ฉันไม่ต้องการสิ่งนี้ในเบราว์เซอร์ทุกตัวที่นั่นฉันคิดว่าฉันสามารถบอกคนอื่นให้ใช้เบราว์เซอร์ชุดหนึ่งเพื่อพิมพ์

เพิ่มคลาส CSS ชื่อ "pagebreak" (หรือ "pb") เช่น:

@media print {
    .pagebreak { page-break-before: always; } /* page-break-after works, as well */
}

จากนั้นเพิ่มแท็ก DIV ที่ว่างเปล่า ( หรือองค์ประกอบบล็อกใด ๆ ที่สร้างกล่อง ) ที่คุณต้องการให้ตัวแบ่งหน้า

<div class="pagebreak"> </div>

มันจะไม่ปรากฏบนหน้า แต่จะแยกหน้าเมื่อพิมพ์

PS อาจใช้เฉพาะเมื่อใช้-after(และสิ่งอื่นที่คุณอาจทำกับ<div>s อื่น ๆในหน้า) แต่ฉันพบว่าฉันต้องเพิ่มคลาส CSS ดังนี้

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

ลองลิงค์นี้

<style>
@media print
{
h1 {page-break-before:always}
}
</style>

แค่อยากจะอัพเดท page-break-afterเป็นสมบัติดั้งเดิมในขณะนี้

รัฐหน้าอย่างเป็นทางการ

สถานที่ให้บริการนี้ถูกแทนที่ด้วยทรัพย์สินทำลาย

คุณสามารถใช้คุณสมบัติ CSS page-break-before(หรือpage-break-after) เพียงแค่ตั้งค่าpage-break-before: alwaysในบรรดาองค์ประกอบระดับบล็อก (เช่นหัวdiv, pหรือtableองค์ประกอบ) ที่ควรจะเริ่มต้นในบรรทัดใหม่

ตัวอย่างเช่นในการทำให้เกิดการแบ่งบรรทัดก่อนส่วนหัวระดับ 2 และก่อนองค์ประกอบใด ๆ ในคลาสnewpage(เช่น<div class=newpage>... ) คุณจะต้องใช้

h2, .newpage { page-break-before: always }

First page (scroll down to see the second page)
<div style="break-after:page"></div>
Second page
<br>
<br>
<button onclick="window.print();return false;" />Print (to see the result) </button>

เพียงเพิ่มที่นี้ที่คุณต้องการหน้าเพื่อไปที่ถัดไป (ข้อความ "หน้า 1" จะอยู่ในหน้า 1 และข้อความ "หน้า 2" จะอยู่ในหน้าสอง)

Page 1
<div style='page-break-after:always'></div>
Page 2

วิธีนี้ใช้ได้เช่นกัน:

First page (there is a break after this)
<div style="break-after:page"></div>
Second page (This will be printed in the second page)

สมมติว่าคุณมีบล็อกที่มีบทความเช่นนี้:

<div class="article"> ... </div>

เพียงแค่เพิ่มสิ่งนี้ลงใน CSS ที่ทำงานให้ฉัน:

@media print {
  .article { page-break-after: always; }
}

(ทดสอบและทำงานกับ Chrome 69 และ Firefox 62)

อ้างอิง:

• https://www.w3schools.com/cssref/pr_print_pageba.asp

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; หมายเหตุสำคัญ: นี่ก็กล่าวแต่มันก็ไม่ได้ทำงานให้ฉันด้วยThis property has been replaced by the break-after property. break-afterนอกจากนี้ยังมีเอกสารเกี่ยวกับ MDN break-afterดูเหมือนจะไม่เป็นที่เฉพาะเจาะจงสำหรับหน้าแบ่งดังนั้นฉันต้องการรักษา page-break-after: always;(ทำงาน)

• เราสามารถเพิ่มแท็กตัวแบ่งหน้าด้วยสไตล์ " page-break-after: always " ณ จุดที่เราต้องการแนะนำการแบ่งหน้าในหน้า html
  
• " การแบ่งหน้าก่อน " ยังใช้งานได้

ตัวอย่าง:

HTML_BLOCK_1
<p style="page-break-after: always"></p>
HTML_BLOCK_2
<p style="page-break-after: always"></p>
HTML_BLOCK_3

ในขณะที่พิมพ์ไฟล์ html ด้วยรหัสด้านบนตัวอย่างก่อนพิมพ์จะแสดงสามหน้า (หนึ่งหน้าสำหรับแต่ละบล็อก html " HTML_BLOCK_n ") โดยที่ในเบราว์เซอร์บล็อกทั้งสามจะปรากฏเรียงตามลำดับกัน

ฉันต้องการตัวแบ่งหน้าทุกแถวที่ 3 ในขณะที่เราใช้คำสั่งพิมพ์บนเบราว์เซอร์

ฉันได้เพิ่ม <div style = 'page-break-before: always;'> </div>

หลังจากทุกแถวที่ 3 และ div ของฉันมี display: flex; ดังนั้นฉันจึงลบจอแสดงผล: ดิ้น และมันก็ทำงานได้ตามที่ฉันต้องการ

CSS

@media print {
  .pagebreak { 
     page-break-before: always; 
  }
}

HTML

<div class="pagebreak"></div>

@ Chris Doggettสมเหตุสมผลดี แม้ว่าฉันจะพบเคล็ดลับตลก ๆ หนึ่งในlvsys.comและใช้งานได้จริงกับ firefox และ chrome เพียงใส่ความคิดเห็นนี้ทุกที่ที่คุณต้องการแทรกตัวแบ่งหน้า นอกจากนี้คุณยังสามารถแทนที่<p>แท็กด้วยองค์ประกอบบล็อกใด ๆ

<p><!-- pagebreak --></p>