html2pdf 라이브러리에서 pagebreak 옵션

html2pdf 라이브러리에서 pagebreak 옵션은 페이지 나누기 동작을 제어하는 데 사용됩니다. 

pagebreak 속성에는 다양한 모드가 있으며, 각각은 다른 방식으로 페이지 나누기를 제어합니다. 

아래는 pagebreak: { mode: ['avoid-all', 'css', 'legacy'] } 옵션에 대한 자세한 설명입니다:

pagebreak 옵션의 모드

avoid-all:

가능한 한 페이지 나누기를 피하려고 합니다.
텍스트와 요소가 페이지 사이에 걸쳐 나누어지지 않도록 합니다.
예를 들어, 테이블 행이나 큰 블록 요소가 페이지 나누기를 피할 수 있도록 합니다.

css:

CSS에서 정의된 페이지 나누기 규칙을 따릅니다.
이는 page-break-before, page-break-after, page-break-inside와 같은 CSS 속성을 기반으로 페이지 나누기를 처리합니다.
이러한 CSS 속성들은 인쇄 시 요소가 페이지 사이에 어떻게 나누어질지를 제어합니다.

legacy:

이전 버전의 html2pdf와의 호환성을 유지하기 위해 사용됩니다.
기본 페이지 나누기 동작을 따릅니다.
이는 최신 페이지 나누기 옵션과는 약간 다를 수 있으며, 이전 버전에서 사용된 방식대로 페이지 나누기를 처리합니다.

var opt = {
    margin: [15, 8, 25, 8], // Top, right, bottom, left margins
    filename: result,
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
};

pagebreak 옵션의 사용 예
javascript
var opt = {
    margin: [15, 8, 25, 8], // Top, right, bottom, left margins
    filename: result,
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
};

각 모드의 역할

avoid-all:

테이블 행과 같은 중요한 요소가 페이지 사이에 나누어지는 것을 방지합니다. 이는 문서가 더 읽기 쉽고 일관된 레이아웃을 유지할 수 있도록 돕습니다.

css:

CSS에서 설정한 페이지 나누기 규칙을 따르기 때문에, CSS를 사용하여 특정 요소에 대한 페이지 나누기 규칙을 세밀하게 제어할 수 있습니다. 예를 들어, 긴 단락이나 이미지가 페이지 사이에 걸쳐 나누어지지 않도록 할 수 있습니다.

legacy:

이전 버전의 html2pdf와의 호환성을 유지합니다. 이는 프로젝트가 html2pdf의 이전 버전을 사용하고 있는 경우에 유용할 수 있으며, 기존 동작을 변경하지 않고 최신 버전으로 업그레이드할 수 있도록 돕습니다.

정리하면 아래와 같습니다.

pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }는 페이지 나누기 동작을 종합적으로 제어하는 데 도움이 됩니다. avoid-all로 중요한 요소의 나누기를 방지하고, css로 세밀한 제어를 가능하게 하며, legacy로 이전 버전과의 호환성을 유지합니다. 이를 통해 PDF 문서가 깔끔하게 출력되도록 도와줍니다.

실제 프로그램에서 자꾸 짤리는 현상이 일어나서 이렇게 고쳤더니 잘 되더군요.

pagebreak: { mode: [''] }

위의 코드로 성공했어요. avoid-all의 문제점은 table이 분할되서 나오는 경우가 있습니다.

상단에 작은 테이블

2페이지에 큰 테이블... 그래서 좀 어렵고, 힘들고, 해멨습니다.

참고하세요~