Tôi có thể buộc ngắt trang khi in HTML không?

Tôi đang tạo một báo cáo HTML sẽ có thể in được và nó có "các phần" sẽ bắt đầu trong một trang mới.

Có cách nào để đưa một cái gì đó vào HTML / CSS sẽ báo hiệu cho trình duyệt rằng nó cần phải ngắt trang (bắt đầu một trang mới) tại thời điểm đó không?

Tôi không cần cái này để hoạt động ở mọi trình duyệt ngoài kia, tôi nghĩ tôi có thể bảo mọi người sử dụng một bộ trình duyệt cụ thể để in cái này.

Thêm một lớp CSS gọi là "pagebreak" (hoặc "pb"), như vậy:

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

Sau đó thêm thẻ DIV trống ( hoặc bất kỳ thành phần khối nào tạo hộp ) nơi bạn muốn ngắt trang.

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

Nó sẽ không hiển thị trên trang, nhưng sẽ phá vỡ trang khi in.

PS Có lẽ điều này chỉ áp dụng khi sử dụng -after(và cả những gì bạn có thể làm với các trang khác <div>trên trang), nhưng tôi thấy rằng tôi phải tăng lớp CSS như sau:

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

Hãy thử liên kết này

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

Chỉ muốn đặt một bản cập nhật. page-break-afterlà một tài sản kế thừa bây giờ.

Chính thức trang bang

Khách sạn này đã được thay thế bằng tài sản sau khi phá vỡ .

Bạn có thể sử dụng thuộc tính CSS page-break-before(hoặc page-break-after). Chỉ cần thiết lập page-break-before: alwaystrên những yếu tố khối cấp (ví dụ, tiêu đề, div, p, hoặc tablecác yếu tố) mà nên bắt đầu trên một dòng mới.

Ví dụ: để ngắt dòng trước bất kỳ tiêu đề cấp 2 nào và trước bất kỳ phần tử nào trong lớp newpage(ví dụ: <div class=newpage>...), bạn sẽ sử dụng

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>

Chỉ cần thêm cái này vào nơi bạn cần trang để đến trang tiếp theo (văn bản "trang 1" sẽ ở trang 1 và văn bản "trang 2" sẽ ở trang thứ hai).

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

Điều này cũng hoạt động:

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

Giả sử bạn có một blog với các bài viết như thế này:

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

Chỉ cần thêm nó vào CSS đã làm việc cho tôi:

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

(đã thử nghiệm và hoạt động trên Chrome 69 và Firefox 62).

Tài liệu tham khảo:

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; lưu ý quan trọng: ở đây đã nói This property has been replaced by the break-after property.nhưng nó không hoạt động với tôi break-after. Ngoài ra, tài liệu MDN về break-afterdường như không cụ thể cho các lần ngắt trang, vì vậy tôi thích giữ (làm việc) page-break-after: always;.

• Chúng tôi có thể thêm thẻ ngắt trang với kiểu " ngắt trang sau: luôn luôn " tại điểm chúng tôi muốn giới thiệu ngắt trang trong trang html.
  
• " ngắt trang trước " cũng hoạt động

Thí dụ:

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

Trong khi in tệp html bằng mã ở trên, bản xem trước in sẽ hiển thị ba trang (một cho mỗi khối html " HTML_BLOCK_n ") trong đó như trong trình duyệt, tất cả ba khối lần lượt xuất hiện lần lượt.

Tôi cần ngắt trang sau mỗi hàng thứ 3 trong khi chúng tôi sử dụng lệnh in trên trình duyệt.

Tôi đã thêm <div style = 'page-break-before: always;'> </ div>

sau mỗi hàng thứ 3 và div cha mẹ của tôi có màn hình: flex; vì vậy tôi loại bỏ hiển thị: flex; và nó đã hoạt động như tôi muốn.

CSS

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

HTML

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

@ Chris Doggett có ý nghĩa hoàn hảo. Mặc dù, tôi đã tìm thấy một mẹo vui trên lvsys.com , và nó thực sự hoạt động trên firefox và chrome. Chỉ cần đặt bình luận này bất cứ nơi nào bạn muốn ngắt trang được chèn. Bạn cũng có thể thay thế <p>thẻ bằng bất kỳ thành phần khối nào.

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