HTML을 PDF로 변환이란?

HTML 마크업을 다운로드할 수 있는 PDF로 변환합니다. CSS 스타일, 이미지, 표, 사용자 정의 페이지 크기를 지원합니다. 청구서, 보고서, 또는 형식이 있는 웹 콘텐츠를 오프라인에 저장할 때 유용합니다.

용지는 A4·A3·Letter·Legal 중 선택할 수 있고 세로/가로 방향을 전환할 수 있으며 여백은 0에서 20mm까지 조절합니다. 필요하면 파일을 비밀번호로 잠그거나 바닥글에 쪽 번호를 넣을 수 있습니다. 인라인 CSS, Base64 이미지, 표 모두 그대로 출력됩니다. 변환은 html2pdf.js와 html2canvas 위에서 동작하므로 웹폰트나 고급 CSS 효과가 있는 페이지는 라이브 프리뷰와 결과가 약간 다를 수 있습니다.

사용 방법

1. 1단계 — 에디터에 HTML 콘텐츠를 붙여넣거나 직접 입력합니다. 실시간 미리 보기에서 PDF의 최종 모습을 확인할 수 있습니다.
2. 2단계 — 페이지 설정을 구성합니다: 용지 크기(A4, A3, Letter, Legal), 방향(세로/가로), 여백을 선택하세요. 필요하면 비밀번호를 설정하거나 쪽 번호를 추가할 수 있습니다.
3. 3단계 — 「PDF 생성」을 클릭해 문서를 만들고 기기에 바로 다운로드합니다.

사용 시기

• HTML 청구서나 영수증 템플릿을 PDF로 만들어 클라이언트에게 보낼 때.
• 차트와 표가 포함된 보고서를 휴대 가능한 보관용 사본으로 저장할 때.
• 워크숍이나 수업용으로 웹 콘텐츠를 인쇄 가능한 핸드아웃으로 만들 때.

결과

프리랜서가 회사 로고, 항목별 표, 합계가 포함된 청구서 HTML을 붙여넣습니다. A4 세로 방향에 여백 20mm로 설정하고 전문적인 PDF를 다운로드해 고객에게 이메일로 전송합니다.

자주 묻는 질문

PDF가 라이브 프리뷰와 다르게 보이는 이유는?

PDF는 html2canvas로 페이지를 이미지로 그린 뒤 그 이미지를 PDF에 감싸는 방식입니다. 웹폰트가 완전히 로드되지 않았거나 position: fixed 요소, CSS 필터가 있는 경우 결과가 프리뷰와 조금 달라질 수 있습니다.

다른 도메인에 호스팅된 이미지를 넣을 수 있나요?

해당 서버가 허용 CORS 헤더를 보낼 때만 가능합니다. 그렇지 않으면 html2canvas가 픽셀을 읽지 못해 PDF에서는 빈 영역으로 표시됩니다. 우회 방법은 이미지를 다운로드해 Base64로 임베드하거나 같은 오리진에 호스팅하는 것입니다.

페이지 나눔은 어떻게 제어하나요?

새 페이지를 시작하고 싶은 요소에 CSS 규칙 page-break-before: always(또는 page-break-after)를 적용하세요. 표 행에 page-break-inside: avoid를 주면 그 행이 두 페이지에 걸쳐 잘리지 않습니다.

PDF의 텍스트를 선택해 복사할 수 있나요?

대체로 어렵습니다. 렌더러가 캔버스로 페이지를 평면화하기 때문에 글자가 비트맵으로 바뀝니다. 일부 솔루션은 보이지 않는 텍스트 레이어를 덮어 선택을 지원하지만, 이 도구는 래스터화된 PDF를 생성합니다. 가독성은 좋지만 복사가 안 될 수 있습니다.

붙여넣을 수 있는 HTML 크기에 제한이 있나요?

실무 기준으로는 마크업 수백 KB, 페이지 수로는 10~15페이지 정도가 한계입니다. 그 이상이면 DOM 전체를 하나의 큰 캔버스에 그린 뒤 페이지를 자르는 과정에서 메모리가 부족해질 수 있습니다.

관련 도구