HTMLをPDFに変換する方法
3 ステップ。すべてブラウザー内で完結します。
モードを選ぶ
素の HTML を貼り付けるか、ブラウザーが取得できる URL を入力します。
ページオプションを選ぶ
ページサイズ、本文のフォントサイズ、余白を選びます。
作成してダウンロード
PDF は pdf-lib でローカルに構築され、ダウンロードとして提供されます。
「HTMLをPDFに変換」とは何か
HTMLをPDFに変換するとは、ウェブページ（または任意の HTML 断片）を、 すべての端末で同じように印刷・表示・保管できる、ポータブルで レイアウト固定の PDF に変えることを意味します。記事、社内文書、 エクスポートしたメモ、あるいは他の PDF と一緒に保管する必要のある 登録ページのスナップショットなどで、これを求める人が多くいます。
imisspdf の HTMLをPDFに変換は、よくある用途を想定しています。 見出し、段落、リスト、引用、コード、リンクを含むきれいな内容です。 Chromium のようなレンダラーではなく、CSS レイアウトをピクセル単位で 再現しようとはしません。その用途には、ブラウザー内蔵の「PDF として 保存」が今でも最良のツールです。代わりにこれが提供するのは、 タブから出ることなく任意の HTML 断片で機能する、ブラウザー内で動き、 自動化でき、貼り付けに優しい変換ツールです。
ブラウザー内でHTMLをPDFに変換する仕組み
HTML を貼り付けると、ツールはそれをローカルで解析し、ブロック （見出し、段落、リストなど）とインラインの範囲（太字、斜体、リンク）の 並びにします。各ブロックは標準フォントの Helvetica / Courier を使い、 pdf-lib で PDF ページに組み版されます。内容があふれると、新しいページが 作成されます。
URL モードでは、ブラウザーが対象サイトに通常の HTTP リクエストを 送ります。アドレスバーが行うのとまったく同じものです。サイトが CORS を 許可していれば、ページの HTML がタブ内で読み取られ、ローカルで描画 されます。許可されていなければ、明確なエラーが表示され、ソースを手動で 貼り付けられます。あなたの URL やその内容について、imisspdf に伝わる ものは何もありません。
よくある用途
- 記事を保管する。 記事の HTML を貼り付けて、長期参照用に PDF を保存します。
- メモアプリの内容をエクスポートする。 Notion、Obsidian、markdown 変換ツールは HTML を生成します。貼り付ければ、ブラウザーから出ずに PDF が得られます。
- レポートを共有する。 アプリで HTML レポートを生成し、受け手が PDF を求めるときにこのツールに通します。
- FAQ の断片を印刷する。 整理された FAQ の一覧が、チケットに添付できる 1 ページの PDF になります。
- 取引メールを保管する。 領収書や確認メールの HTML を、会計記録用に PDF として保存します。
プライバシーとセキュリティ
サーバー型の HTMLをPDFに変換ツールは、あなたの HTML（または URL と セッション Cookie）を、そのクラウドで動く Chromium インスタンスに 送らなければなりません。それでも機能はしますが、あなたの内容が 第三者の手に渡ります。imisspdf の変換ツールは、すべてを pdf-lib で ブラウザー内で解析・描画します。発生する唯一のネットワーク呼び出しは、 URL モードであなたが明示的に起動する取得だけで、それはあなたの ブラウザーから対象サイトへ直接行われ、当方を経由しません。
よくある質問
見出し（h1〜h6）、段落、リスト（ul/ol）、引用、整形済みコードブロック、水平線、さらにインラインの太字・斜体・コード・リンクに対応しています。レンダラーは意図的にシンプルなので、Notion ページからの貼り付け、Google ドキュメントのエクスポート、ブログ記事などがそのままきれいな PDF になり、驚くような崩れはありません。
CSS レイアウトには対応していません。float、grid、flex は無視されます。表もありません（行はテキストに平坦化されます）。埋め込み画像もありません。ウェブフォントもなく、PDF は標準の Helvetica / Courier セットを使用します。Chromium のようなピクセル単位で正確なレンダリングが必要な場合は、ページのスクリーンショットを撮って代わりに JPGをPDFに変換をご利用ください。
はい。ツールはブラウザーから直接 HTML を取得します。これは CORS ポリシーで許可されているサイトで機能します。大手サイトの多くは許可していません。取得がブロックされた場合は明確なエラーが表示されます。回避策として、ページの HTML を手動でコピーし（右クリック → ソースを表示 → コピー）、テキスト欄に貼り付けてください。
貼り付けた内容については非公開です。HTML がブラウザーから外に出ることはありません。URL の場合は、訪問したときとまったく同じように、ブラウザーがそのサーバーから直接ページを取得します。imisspdf が URL や内容を見ることはありません。PDF の組み立てはタブ内でローカルに行われます。
ブラウザーの「PDF として保存」は Chromium の完全なレンダリングエンジンを使用し、ピクセル単位の忠実さには最適ですが、各ページを個別に印刷する必要があり、スクリプトで自動化できません。imisspdf の HTMLをPDFに変換はよりシンプルですが、任意の HTML 断片を貼り付け、変換を自動化し、オフラインで実行できます。用途に合う方を選んでください。
最良の結果を得るためのコツ
- ページ全体ではなく本文を貼り付ける。 よりコンパクトな PDF にしたいなら、ナビゲーション、サイドバー、フッターを削除します。
- セマンティックなタグを使う。 小見出しには h2、段落には p、リストには ul/ol を。レンダラーはクラスではなくタグに従います。
- CORS が URL をブロックするなら、ソースを表示して貼り付ける。 最近のほとんどのサイトは直接取得をブロックするクロスオリジンヘッダーを送ります。HTML を手動でコピーするのが確実な代替策です。
- ピクセル単位の忠実さが必要なら、ブラウザーの「PDF として保存」を使う。 その後、結果をこのサイトの他のツールで処理します。
関連する PDF ツール
- TXT を PDF に変換 — HTML ではなくプレーンテキスト。
- JPG を PDF に変換 — 画像（やページのスクリーンショット）を 1 つの PDF にまとめます。
- PDF を結合 — 結果を他の PDF と組み合わせます。
- PDF を圧縮 — 元の HTML に繰り返しの内容が多かった場合に結果を縮小します。