업로드 없음, 100% 로컬, 계정 없음

HTML을 PDF로

HTML을 붙여넣고 페이지 크기를 골라 PDF를 내려받으세요, 모두 브라우저에서 렌더링됩니다.

HTML을 PDF로 작동 방식

HTML to PDF 도구는 편집기에 붙여넣은 HTML 마크업을 DOMPurify로 정리하여 스크립트와 안전하지 않은 속성을 제거하고, html2canvas로 오프스크린 캔버스에 렌더링한 뒤, jsPDF로 결과를 PDF로 인코딩합니다. 전체 파이프라인이 브라우저 탭 안에서 실행됩니다. HTML 코드나 렌더링된 결과물은 어떤 서버에도 전송되지 않습니다. 이로써 온라인 서비스에 붙여넣고 싶지 않은 개인 데이터가 포함된 HTML 조각을 변환하기에 적합합니다.

이 도구를 사용하기 전에 출력 형식을 이해해야 합니다. PDF 페이지는 벡터 텍스트가 아닌 래스터 이미지입니다. 출력의 텍스트는 선택할 수 없고 검색할 수 없으며 재흐름도 불가능합니다. URL로 참조된 외부 리소스(이미지)는 브라우저 CORS 정책으로 차단되어 로드되지 않습니다. 인라인 스타일과 임베드된 CSS는 작동하지만, 커스텀 웹 폰트나 고급 CSS 그리드를 사용한 복잡한 레이아웃은 정확하게 렌더링되지 않을 수 있습니다. 전체 웹 페이지를 문서 충실도 높게 변환하려면 서버 측에서 실행하는 헤드리스 브라우저가 더 적합한 도구입니다.

작성자: Bastien Sulyan

HTML을 PDF로 단계별 사용 방법

  1. 편집기 영역에 HTML 마크업을 붙여넣습니다.
  2. 선택적으로 페이지 크기(A4 또는 Letter)와 방향을 조정합니다.
  3. 변환을 클릭합니다. DOMPurify가 HTML을 정리하고 html2canvas가 렌더링합니다.
  4. jsPDF가 캔버스 출력을 PDF 페이지로 인코딩하기를 기다립니다.
  5. PDF를 다운로드합니다.

자주 사용되는 사례

  • 로컬 템플릿에서 브라우저로 HTML 청구서를 생성했고 변환 서비스에 이메일로 보내지 않고 PDF 사본을 원하는 경우.
  • API 데이터로 구성된 간단한 HTML 보고서를 보관용 PDF로 저장해야 하는 경우, HTML을 붙여넣어 로컬에서 변환하는 경우.
  • 스타일이 적용된 HTML 이메일 템플릿을 작성했고 PDF로 인쇄했을 때 어떻게 보이는지 미리보고 싶은 경우.
  • 개발자가 서버 측 헤드리스 브라우저를 설정하지 않고 테스트 중에 HTML 조각에서 빠르게 PDF를 만들어야 하는 경우.

자주 묻는 질문

출력 PDF에서 텍스트를 선택할 수 없는 이유는 무엇인가요?

변환 파이프라인이 html2canvas를 사용하여 HTML을 캔버스 비트맵으로 렌더링한 뒤, jsPDF로 그 비트맵을 PDF 페이지 안의 이미지 데이터로 인코딩합니다. 출력은 래스터화된 이미지이지 텍스트 레이어가 아닙니다. 선택 가능한 텍스트가 있는 PDF가 필요하다면 Puppeteer 같은 서버 측 헤드리스 브라우저가 필요하며, 이 도구는 처리를 로컬에 유지하기 위해 의도적으로 그 방식을 피합니다.

내 HTML의 이미지가 PDF에 나타나지 않는 이유는 무엇인가요?

외부 URL에서 로드된 이미지는 브라우저 CORS 정책의 적용을 받습니다. 이미지 서버가 허용적인 CORS 헤더를 전송하지 않으면 html2canvas가 픽셀 데이터를 읽을 수 없어 이미지 슬롯이 빈 칸으로 렌더링됩니다. HTML에 직접 인라인된 base64 인코딩 이미지나 동일 출처의 이미지는 이 제한 없이 작동합니다.

붙여넣은 HTML이 서버로 전송되나요?

아닙니다. HTML은 처음부터 끝까지 브라우저 메모리에 머물러 있습니다. DOMPurify가 클라이언트 측에서 정리하고, html2canvas가 클라이언트 측에서 렌더링하며, jsPDF가 클라이언트 측에서 PDF를 인코딩합니다. 브라우저 탭을 벗어나는 것은 아무것도 없습니다.

DOMPurify 정리는 무엇을 제거하나요?

DOMPurify는 스크립트 태그, onclick이나 onload 같은 이벤트 핸들러 속성, javascript: URL, 코드를 실행할 수 있는 다른 구조를 제거합니다. 구조적 및 스타일 마크업은 보존하므로, 렌더링된 결과는 동일하게 보이지만 문서 컨텍스트에 삽입하기에 안전합니다.

HTML을 붙여넣는 대신 전체 웹 페이지 URL을 변환할 수 있나요?

아닙니다. 이 도구는 직접 붙여넣은 HTML 마크업으로 작동합니다. URL을 로드하려면 페이지를 가져와야 하는데, 대부분의 사이트에서 CORS 제한이 발생하고 로컬 처리 모델을 벗어나는 네트워크 요청이 필요합니다.

관련 도구

모든 처리를 로컬에서, 보완 도구를 살펴보세요.

모든 PDF 도구