HTML PDF 変換 — コードを貼り付けて PDF に保存
選んだ用紙サイズと余白で HTML コードを PDF にするツール
ブラウザー内で処理・アップロード不要
部分（<div>…）でも文書全体（<html>…）でも貼り付けられます。文書全体の場合は <body> の中身と <style> だけを使います。
追加したいスタイルがあれば入力してください。印刷用の @media print ルールも適用されます。
セキュリティとプライバシーのため、data:・blob: 以外のアドレスの画像・フォント・CSS は読み込まず、スクリプトも実行しません。Web ページの URL を入れて変換する機能はありません。
プレビュー（印刷幅）
HTML を入力するとプレビューが表示されます。
印刷画面の送信先（プリンター）で「PDF に保存」を選んでください。文字がそのまま残り、検索・コピーできる PDF になります。改ページはブラウザーが決めます。
プレビューをページの高さで切り分けて画像として保存します。印刷画面なしで直接ダウンロードできますが、文字の検索・コピーはできず、行の途中で改ページされることがあります。
HTML→PDF変換とは
見積書、領収書、メールのテンプレートは HTML で作られていることがよくあります。HTML と CSS をここに貼り付けると、選んだ用紙の印刷幅でプレビューでき、2 つの方法で PDF に保存できます。印刷画面を通して文字の PDF を作る方法と、画像 PDF を直接ダウンロードする方法です。コードはこのページの中にとどまり、サーバーには送信しません。
使い方
- HTML を貼り付けます。文書全体（
<html>…）の場合は<body>の中身と<style>だけを使います。必要なら 2 つ目の欄に CSS を入れます。 - 用紙（A4、レター、A3）、向き、余白、背景を印刷するかどうかを選びます。
- プレビューを確認して 印刷画面から PDF に保存 を押し、送信先で「PDF に保存」を選びます。
- または 画像 PDF を直接ダウンロード を押すと、ページの画像でできた PDF が手に入ります。
変換のしくみ
- クリーンアップ：コードを DOMParser（実行されない文書）とブラウザーの CSS パーサーで解析し、data:・blob: 以外のアドレス（画像、@import、url()、srcset）、script・iframe・object・link 要素、on* 属性をすべて削除します。削除したアドレスは一覧で表示します。
- プレビュー枠：スクリプトの権限がないサンドボックスの iframe で、リクエストとスクリプトを止める Content-Security-Policy を設定しています。
- フォント：端末にインストールされたフォント（システムの UI フォント、なければブラウザーが自動で代替）を使うので、日本語もブラウザーで見えるとおりに出力されます。
- 用紙：A4 210×297 mm、A3 297×420 mm（ISO 216）、レター 8.5×11 インチ。印刷モードでは CSS の
@pageでサイズと余白を指定します。 - 画像 PDF：印刷幅（A4・余白 15 mm で 680 px）でレイアウトした内容を 1 ページずつ 2 倍の解像度で取り込み、JPEG として保存します。最大 50 ページで、html-to-image（MIT）と pdf-lib（MIT）を使います。
- 長さ：HTML と CSS を合わせて 500,000 文字まで。
例
| 目的 | 手順 |
|---|---|
| 文字を検索できる見積書 PDF | 例を入れる → A4、標準の余白 → 印刷画面 → PDF に保存 |
| スマートフォンですぐにファイルがほしい | 画像 PDF を直接ダウンロード |
| 横に長い表 | 横向き、狭い余白 |
HTML を PNG 画像として保存したいときは HTML 画像変換ツールを、Markdown を画面で確認したいときは Markdownプレビューを使ってください。
よくある質問
Web ページの URL を入れて変換できますか？
いいえ。貼り付けた HTML だけを変換します。ほかのサイトを代わりに取得すると、あなたの端末からそのサイトへリクエストを送ることになり、ログイン状態が付くこともあるためです。Web ページを保存したいときは、そのページを開いてブラウザーの「印刷 → PDF に保存」を使ってください。
2 つのボタンの違いは？
「印刷画面から PDF に保存」はブラウザー自身の印刷機能を使うので、文字を検索でき、改ページも行と行の間に入ります。「画像 PDF を直接ダウンロード」は印刷画面を経由しませんが、各ページを画像として保存するため文字を選択できず、行の途中で改ページされることがあります。
日本語は正しく表示されますか？
はい。プレビューも PDF もブラウザーが端末にインストールされたフォントで描画するので、日本語はブラウザーで見えるとおりに出力されます。
画像や Web フォントが表示されないのはなぜですか？
セキュリティとプライバシーのため、data:・blob: 以外のアドレスの画像・フォント・スタイルシートは読み込みません。画像は Base64 の data: URL で埋め込んでください。文字は端末にインストールされたフォントを使います。
スクリプトはどうなりますか？
script 要素と onclick などのイベント属性は削除され、プレビュー枠にもスクリプトを禁止するポリシーが設定されているので、貼り付けたコードは何も実行されません。
改ページを指定できますか？
印刷モードでは `break-before: page` などの CSS が効きます。CSS 欄の `@media print` ルールは印刷時にだけ適用されます。
