HTML을 PDF로 변환하는 방법

HTML에서 PDF를 만드는 것은 송장, 보고서, 편지, 인증서 — CSS로 레이아웃을 제어하고 PDF로 배포하려는 모든 문서를 생성하는 데 유용합니다.

HTML을 PDF로 변환하는 방법

1. HTML 붙여넣기 — 인라인 CSS 또는 <style> 태그를 포함한 HTML 코드를 편집기에 입력하세요. 코드는 헤더, 표, 이미지 및 스타일이 있는 전체 페이지 구조를 포함할 수 있습니다.
2. 렌더링 미리보기 — 실시간 미리보기는 입력하는 동안 PDF가 정확히 어떻게 렌더링될지 보여줍니다. 결과가 기대와 일치할 때까지 HTML과 CSS를 조정하세요.
3. 생성 및 다운로드 — 브라우저에서 PDF를 만들려면 생성 버튼을 클릭한 다음 즉시 다운로드하세요.

만들 수 있는 것

• 송장 및 영수증 — 회사 브랜딩, 항목 라인 및 합계가 있는 구조화된 표
• 보고서 — 제목, 단락, 차트 및 데이터 표가 있는 포맷된 문서
• 인증서 — 사용자 정의 글꼴, 테두리 및 가운데 텍스트가 있는 스타일이 지정된 레이아웃
• 편지 — 헤더, 본문 및 서명 영역이 있는 전문 통신문
• 이력서 — 지원서용 깔끔한 PDF로 내보낸 세련된 레이아웃

PDF 출력을 위한 스타일링 팁

인라인 스타일 또는 <style> 태그 사용 — 외부 스타일시트는 로드되지 않습니다. 모든 CSS를 요소에 인라인으로 또는 HTML의 <style> 블록에 배치하세요.

페이지 여백 정의 — PDF의 콘텐츠 주위 공간을 제어하기 위해 CSS에서 @page { margin: 20mm; }를 사용하세요.

인쇄에 적합한 단위 사용 — mm, cm 및 pt는 PDF에서 px 또는 rem보다 더 예측 가능합니다. 물리적 치수와 일치해야 하는 여백과 간격에 mm를 사용하세요.

뷰포트 종속 레이아웃 피하기 — 백분율 너비와 고정 픽셀 너비가 가장 잘 작동합니다. 뷰포트 단위(vw, vh)는 PDF에서 예상대로 작동하지 않을 수 있습니다.

팁

• 먼저 미리보기 — 생성하기 전에 항상 실시간 미리보기를 확인하세요. 매번 PDF를 재생성하는 것보다 HTML에서 반복하는 것이 훨씬 빠릅니다.
• 이미지에 base64 사용 — PDF에 포함을 보장하기 위해 이미지를 base64 데이터 URI로 변환하세요. 외부 URL은 CORS 제한으로 인해 실패할 수 있습니다.
• 단순하게 유지 — 복잡한 CSS 레이아웃(중첩 그리드, 겹쳐진 위치 요소)은 완벽하게 렌더링되지 않을 수 있습니다. 더 단순한 레이아웃은 더 신뢰할 수 있는 PDF를 만듭니다.
• 페이지 나누기 테스트 — 다중 페이지 문서의 경우 새 페이지가 시작되는 위치를 제어하기 위해 page-break-before: always를 사용하세요.