HTML 인쇄시 페이지를 강제로 끊을 수 있습니까?

인쇄 가능한 HTML 보고서를 만들고 있는데 새 페이지에서 시작해야하는 "섹션"이 있습니다.

HTML / CSS에 무언가를 넣을 수있는 방법이 있습니까? 브라우저에게 그 시점에서 페이지를 강제로 끊어야한다고 (새 페이지를 시작해야 함) 알릴 수 있습니까?

나는 모든 브라우저에서 작동하기 위해 이것을 필요로하지 않는다. 나는 이것을 인쇄하기 위해 사람들에게 특정 브라우저 세트를 사용하도록 지시 할 수 있다고 생각한다.

"pagebreak"(또는 "pb")라는 CSS 클래스를 다음과 같이 추가하십시오.

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

그런 다음 페이지 나누기를 원하는 빈 DIV 태그 ( 또는 상자를 생성하는 모든 블록 요소)를 추가 하십시오.

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

페이지에는 표시되지 않지만 인쇄시 페이지가 분리됩니다.

추신 : 이것은 아마도 사용할 때 -after(그리고 <div>페이지의 다른 것들과 함께 할 수있는 것) 에만 적용 되지만 CSS 클래스를 다음과 같이 보강해야한다는 것을 알았습니다.

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

이 링크를 사용해보십시오

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

그냥 업데이트하고 싶었습니다. page-break-after지금은 유산입니다.

공식 페이지 상태

이 속성은 break-after 속성 으로 대체되었습니다 .

CSS 속성 page-break-before(또는 page-break-after)을 사용할 수 있습니다 . 그냥 설정 page-break-before: always하는 블록 수준 요소 (예를 들어, 제목에 div, p또는 table새로운 행에서 시작해야 요소).

예를 들어, 두 번째 수준 제목 앞과 클래스의 요소 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페이지 나누기에 특정하지 않은 것 같아서 (working) 유지하는 것을 선호합니다 page-break-after: always;.

• html 페이지에서 페이지 나누기 를 소개하려는 지점에서 " page-break-after : always " 스타일 의 페이지 나누기 태그를 추가 할 수 있습니다 .
  
• " page-break-before "도 작동합니다

예:

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>를 추가했습니다.

모든 세 번째 행과 부모 div가 표시된 후 : flex; 그래서 표시를 제거했습니다 : flex; 내가 원하는대로 작동했습니다.

CSS

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

HTML

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

@ Chris Doggett 는 완벽한 의미를 갖습니다. lvsys.com 에서 재미있는 트릭을 발견했지만 실제로 파이어 폭스와 크롬에서 작동합니다. 페이지 나누기를 삽입하려는 위치에이 주석을 넣으십시오. <p>태그를 블록 요소로 바꿀 수도 있습니다 .

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