HTML PDF 변환 — HTML 코드를 PDF로 저장
HTML 코드를 용지·여백을 맞춰 PDF로 저장하는 도구
브라우저에서 처리 · 서버로 전송되지 않음
조각(<div>…)이나 문서 전체(<html>…)를 붙여 넣으세요. 문서 전체면 <body> 안쪽과 <style>만 써요.
따로 쓸 스타일이 있으면 넣으세요. 인쇄용 @media print 규칙도 적용돼요.
보안과 개인정보를 위해 data:·blob: 주소가 아닌 이미지·글꼴·CSS는 요청하지 않고, 스크립트도 실행하지 않아요. 외부 웹페이지 주소를 넣어 변환하는 기능은 없어요.
미리보기 (인쇄 너비)
HTML을 입력하면 미리보기가 보여요.
인쇄 창의 대상(프린터)에서 「PDF로 저장」을 고르세요. 글자가 그대로 남아 검색·복사되는 PDF가 만들어지고, 쪽 나눔은 브라우저가 해요.
화면을 쪽 높이로 잘라 그림으로 담아요. 인쇄 창 없이 바로 받지만 글자를 검색·복사할 수 없고, 줄 중간에서 쪽이 나뉠 수 있어요.
HTML PDF 변환이란?
견적서, 영수증, 이메일 템플릿처럼 HTML로 만든 문서를 PDF로 보관하거나 보낼 때 쓰는 도구예요. HTML과 CSS를 붙여 넣으면 고른 용지 너비에 맞춘 미리보기가 바로 보이고, 두 가지 방법으로 PDF를 만들 수 있어요. 글자가 살아 있는 PDF가 필요하면 인쇄 창의 「PDF로 저장」을, 인쇄 창 없이 파일로 바로 받고 싶으면 이미지 PDF를 고르면 돼요. 입력한 코드는 서버로 보내지 않고 이 페이지에서만 다뤄요.
사용법
- HTML 칸에 코드를 붙여 넣어요. 문서 전체(
<html>…)를 넣으면<body>안쪽과<style>만 써요. 필요하면 CSS 칸에 스타일을 더해요. - 용지(A4·Letter·A3), 방향(세로·가로), 여백을 고르고, 배경색까지 인쇄할지 정해요.
- 미리보기를 확인한 뒤 인쇄 창에서 PDF로 저장을 눌러요. 인쇄 창의 대상에서 「PDF로 저장」을 고르고 저장해요.
- 또는 이미지 PDF로 바로 받기를 눌러 쪽마다 그림으로 담은 PDF를 받아요.
기준과 동작 방식
- 정리 단계: DOMParser로 코드를 실행되지 않는 문서로 읽고, 브라우저의 CSS 해석기로 스타일을 읽어서 data:·blob:가 아닌 주소(이미지, @import, url(), srcset)와 script·iframe·object·link 요소, on으로 시작하는 이벤트 속성을 지워요. 지운 주소는 목록으로 알려 줘요.
- 미리보기 창: 스크립트 허용 없이 격리된 iframe에 콘텐츠 보안 정책(외부 요청·스크립트 금지)을 넣어서 보여 줘요.
- 용지: A4 210×297mm, A3 297×420mm(ISO 216), Letter 8.5×11인치예요. 인쇄 방식은 CSS
@page로 크기와 여백을 정해요. - 이미지 PDF: 인쇄 가능한 너비(예: A4·여백 15mm면 680px)로 배치한 내용을 쪽 높이마다 2배 해상도로 캡처해 JPEG로 담아요. 최대 50쪽이에요. 캡처는 html-to-image(MIT), PDF는 pdf-lib(MIT)로 만들어요.
알아 두면 좋은 점
미리보기는 고른 용지에서 여백을 뺀 너비로 보여 줘서, 인쇄했을 때의 줄 바꿈과 거의 같아요. 표가 넘치면 방향을 가로로 바꾸거나 여백을 줄여 보세요. 인쇄 창에서 「머리글과 바닥글」 옵션을 끄면 날짜와 주소가 PDF에 찍히지 않아요. 배경색이 빠져 보이면 설정의 배경 인쇄를 켜 두세요.
예시
| 하고 싶은 일 | 방법 |
|---|---|
| 검색되는 견적서 PDF | 예시 넣기 → A4·보통 여백 → 인쇄 창에서 PDF로 저장 |
| 휴대폰에서 바로 파일로 | 이미지 PDF로 바로 받기 |
| 가로로 넓은 표 | 방향 「가로」, 여백 「좁게」 |
HTML을 PNG 이미지로 저장하려면 HTML 이미지 변환을, 마크다운 문서라면 마크다운 PDF 변환 도구를 써 보세요.
자주 묻는 질문
웹페이지 주소(URL)를 넣어서 변환할 수 있나요?
아니요. 이 도구는 붙여 넣은 HTML 코드만 변환해요. 다른 사이트를 대신 불러오면 그 사이트에 내 기기의 요청이 가고 로그인 정보가 섞일 수 있어서 기능을 두지 않았어요. 웹페이지를 PDF로 만들려면 그 페이지에서 브라우저의 인쇄(Ctrl+P) → 「PDF로 저장」을 쓰면 돼요.
두 가지 저장 방법은 무엇이 다른가요?
「인쇄 창에서 PDF로 저장」은 브라우저의 인쇄 기능으로 만들어서 글자가 그대로 남아 검색·복사가 되고, 쪽 나눔도 브라우저가 문단을 보고 정해요. 「이미지 PDF로 바로 받기」는 인쇄 창 없이 바로 받지만 화면을 쪽 높이로 잘라 그림으로 담기 때문에 글자를 고를 수 없고 줄 중간에서 쪽이 나뉠 수 있어요.
이미지나 웹 글꼴이 안 보여요.
보안과 개인정보를 위해 data:·blob: 주소가 아닌 이미지, 글꼴, CSS 파일은 요청하지 않아요. 이미지는 Base64 data: 주소로 넣어 주세요. 이미지를 Base64로 바꾸는 도구로 쉽게 만들 수 있어요. 글꼴은 기기에 설치된 글꼴로 그려요.
스크립트가 들어 있으면요?
script 태그, onclick 같은 이벤트 속성은 지우고, 미리보기 창에는 스크립트를 막는 보안 정책을 걸어서 붙여 넣은 코드가 실행되지 않아요.
쪽 나눔을 직접 정할 수 있나요?
인쇄 방식에서는 CSS의 `break-before: page`나 `page-break-after: always`가 그대로 적용돼요. CSS 칸에 `@media print` 규칙을 넣으면 인쇄할 때만 쓰는 스타일도 지정할 수 있어요.
