PDF 페이지 나누기

HTML을 PDF로 출력시 지정된 용지(기본 값은 A4)를 벗어날 경우 컨텐트가 잘려서 다음 페이지로 넘어가게 됩니다. 명시적인 페이지 나누기를 통해 출력될 컨텐트 량을 조절해 보다 미려한 PDF 문서를 만들 수 있습니다.

명시적인 페이지 나누기

명시적으로 페이지를 하기 위해서 추가적인 DIV 태그를 사용해 페이지가 나뉘는 지점을 지정할 수 있습니다. 추가적인 DIV 태그에 적용되는 스타일에 아래와 같은 page-break 스타일을 적용하면 해당 DIV 태그를 기준으로 다음 페이지로 넘어가게 됩니다.

CSS

<style type="text/css" media="screen,print">
.page-break{
    page-break-after:always;
    clear:both;
    display:block;
}
</style>

아래는 전체적인 HTML 코드입니다.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css" media="screen,print">
    .page-break {
      display: block;
      clear: both;
      page-break-after: always;
  }
  </style>
</head>

<body>
  페이지 1
  <div class="page-break"></div>
  페이지 2
</body>
</html>