PDF에서 머리글, 바닥글 및 페이지 나누기 관리하기
페이지 나누기는 혼란을 야기할 수 있습니다.
page-break-after CSS 규칙은 올바르게 적용되면 항상 작동합니다. 그러나, 이 규칙은 스타일 시트가 display:block에서 div를 변경하면 작동하지 않습니다. 블록 수준의 요소에 page-break-after 규칙이 적용되었는지 확인하십시오. 바디 태그의 직접 자식인 div가 선호됩니다.
아래 HTML 예시는 다음을 보여줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html>대신 모든 PDF 페이지에서 반복되는 테이블 헤더와 푸터가 필요한 경우, 이 기사를 확인하십시오: HTML PDF에서 페이지 나누기 추가 또는 방지
위의 단계를 수행해도 문제가 해결되지 않으면 다음 단계를 시도해 보세요.
1. 문제를 단순화하세요
콘텐츠 길이가 다양하다면, 다양한 길이의 콘텐츠를 테스트하여 올바른 HTML/CSS를 사용하고 있는지 확인하십시오. 이 도구는 도움을 주는 데 사용할 수 있습니다.
2. HTML과 CSS의 유효성을 검사하세요
CSS 유효성 검사기는 사용된 CSS 스타일을 확인하는 데 사용할 수 있습니다.
HTML 유효성 검사기는 HTML 입력의 유효성을 검사하는 데 도움을 줄 수 있습니다.
또한 웹 디자이너에게 HTML을 검토해 달라고 요청하고 변경 사항을 추적할 수 있습니다.
반면에, 공개 섹션의 위치는 테이블 구조, tfoot 및 여러 요인을 포함한 많은 요소에 의해 영향을 받습니다. 그러므로 HTML 문자열과 구조를 다시 한번 확인하는 것이 분명 도움이 될 것입니다.
3. Chrome의 인쇄 미리보기에서 출력물을 확인하세요.
IronPDF IronPDF PDF 렌더링 엔진을 사용하기 때문에 데스크톱 Chrome 웹 브라우저와 동일한 PDF를 출력합니다.
따라서 Chrome의 인쇄 미리보기를 통해 HTML이 어떻게 보이는지 확인하고 필요에 따라 HTML을 수정할 수 있습니다. 시행착오를 거쳐야 할 수도 있지만, 이것이 HTML을 디버깅하는 가장 쉬운 방법입니다.
Chrome 인쇄 미리보기를 통해 HTML을 디버깅하는 방법에 대해 자세히 알아보세요: 픽셀 단위로 완벽한 HTML 서식 지정
Chrome PDF 렌더링 엔진에 대한 자세한 내용은 다음 문서를 참조하세요. IronPDF의 Chrome 렌더러란 무엇인가요?
4. Chrome 개발자 도구를 사용하세요
또는 Chrome 개발자 도구의 '검사' 기능을 사용하여 요소에서 계산된 최종 CSS를 찾을 수도 있습니다. 이렇게 하면 문자열에 포함된 각 HTML 요소에 대한 자세한 정보를 얻을 수 있습니다.
5. IronPDF 사용하여 HTML을 렌더링합니다.
최종 HTML 문자열 또는 HTML 파일을 IronPDF Chrome Renderer로 보내고 RenderHtmlAsPdf() 또는 RenderHtmlFileAsPdf() 메서드를 사용하여 PDF 문서를 만드십시오.
출력 PDF와 렌더링 작업을 세밀하게 조정하려면 렌더러에 몇 가지 렌더링 옵션을 지정해야 할 수 있습니다. 더 자세한 내용을 알아보려면 이 기사를 참조하세요.
커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.
