HTML to PDF
HTMLファイル(.html、.htm) — 保存したウェブページ、メールテンプレート、デザインプレビュー、ダッシュボードエクスポート — をPDFドキュメントに変換します。背景を含めるかどうかを選択できます。ファイルはブラウザ内で処理されます。
HTML to PDFは、.htmlおよび.htmファイルをPDFドキュメントに変換します。HTMLをサニタイズし(<script>タグとインラインイベントハンドラーを削除)、隠れたコンテナでレンダリングし、結果をhtml2canvasで2× DPIでキャプチャし、pdf-libを使用してページをPDFに埋め込みます。背景を含めるトグルはブラウザの印刷ダイアログの慣例を反映します — よりクリーンで紙にやさしい出力のためにデフォルトでオフです。
HTML to PDFとは?
HTML — HyperText Markup Language — はすべてのウェブページの基盤です。ブラウザはマークアップとスタイル用のCSS、(通常)インタラクティビティ用のJavaScriptを組み合わせてHTMLをレンダリングします。ブラウザからウェブページを保存すると、マークアップをキャプチャした.htmlファイルが得られます。デザイナーからHTMLメールテンプレートを受け取った場合、それも.htmlファイルです。HTMLファイルはMailchimp / SendGridのメールエクスポート、ウェブアプリケーションダッシュボード(Tableau、Looker)、静的サイトジェネレーター、メールテンプレートやマーケティングランディングページを書く人によっても生成されます。
HTMLからPDFへの変換は、レンダリングされた出力 — メール校正、ダッシュボードスナップショット、保存記事、ランディングページモックアップ — を、ブラウザで開かない相手と共有する必要があるときによく行われます。PDFはユニバーサルな印刷/共有フォーマットです。ほとんどのオンラインHTML→PDFツールはファイルをリモートサーバーにアップロードします — HTMLにメールアドレス、内部リンク、未公開デザインが含まれている場合は厄介です。このツールは完全にブラウザ内でレンダリングします。HTMLがネットワークを越えることはありません。
ブラウザ内HTML変換はどう動作しますか?
Pikowlは各HTMLファイルをBlob.text() APIで読み込み、DOMParserでマークアップを解析し、サニタイズし(<script>要素とインラインのon*イベントハンドラーを削除 — JavaScriptは決して実行されません)、隠れたスタイル付きコンテナ内にレンダリングします。html2canvasはレンダリングされたDOMを2× DPI画像としてキャプチャし、ページ高さのチャンクにスライスしてpdf-libでPDFに埋め込みます。インラインCSS — <style>タグとstyle="..."属性 — は保持されます。外部リソース(CDNホストの画像、ウェブフォント)は同一オリジンかCORS有効ヘッダーを使用する場合のみ読み込まれます。
信頼できないHTMLファイルをここで変換するのは安全ですか?
はい。レンダリング前に<script>タグとインラインイベントハンドラー(onclick、onloadなど)を削除するため、HTML内のJavaScriptは決して実行されません — 悪意のあるファイルをドラッグしても同様です。href属性内のjavascript: URLも削除されます。標準CSS(外部スタイルシートとウェブフォントを含む)は保持されます(それらは元のオリジンから読み込まれますが、インラインJSは実行されません)。HTMLはFile API経由でローカルに読み込まれ、ブラウザ内で処理され、PDFはダウンロードまでメモリ内にのみ存在します。タブを閉じればすべて破棄されます。
「背景を含める」については?
デフォルトでは、ページの背景色や背景画像はPDFにレンダリングされません — 出力はクリーンな白背景を使用します。これはブラウザの印刷ダイアログ(Chromeの「背景のグラフィック」トグル、Firefoxの「背景画像を印刷」)の慣例を反映しており、背景がプリンターのインクを消費しダークテーマでテキストを覆い隠すため、デフォルトはオフです。HTMLのデザインが背景を意図的に使用している場合 — メールテンプレート、マーケティングランディングページ、テーマ付きカードを持つダッシュボード — は背景を含めるを有効にしてください。トグルはページレベルの背景のみを制御します。個別のdivの要素レベルのbackground-colorとbackground-imageは常にレンダリングされます。
制限とその理由は?
1回の変換で最大30 HTMLファイル、1ファイルあたり10 MB、合計100 MBでソフト警告、150 MBでハード上限。HTMLレンダリングがこのバッチで最も重いステップであるため、ファイル数はTXTやMarkdown(50)より少ないです — html2canvasは長い文書で1つあたり数秒かかり、ラスタライズは大きなインメモリcanvasを生成します。非常に長い単一ファイル(PDFページが約50を超えるもの)の場合は、目立つ待ち時間を予想してください。
HTMLでPikowlはSmallpdfやiLovePDFと比べてどうですか?
実質的な違いは、処理場所、JavaScriptの扱い、毎日の使用制限、価格です。下の数字は2026年4月時点の各サービスの公開無料プランを反映しています。
| 機能 | Pikowl | Smallpdf | iLovePDF |
|---|---|---|---|
| ファイルが処理される場所 | あなたのブラウザ | リモートサーバー | リモートサーバー |
| 登録必須 | いいえ | 任意 | 任意 |
| 出力オプション | 背景トグル · 3ページサイズ · ページ番号 | URLのみ(.htmlファイル不可) | URLまたは.html、サーバーレンダリング |
| 最大ファイルサイズ(無料) | 10 MB | 5 MB | 200 MB(合計) |
| 価格 | 無料 | 無制限$9/月 | プレミアム$7/月 |
出典:smallpdf.com/pricingおよびilovepdf.com/pricing、2026年4月取得。
主な用途
- 保存したウェブページ:記事や調査のブラウザ保存.htmlファイルを、オフライン読書用のページ分けされたアーカイブPDFに変換します。
- メールテンプレート校正:デザイナーやマーケターは、実際のメールを転送せずにHTMLメールテンプレートをクライアントレビュー用のPDF校正としてエクスポートできます。
- ダッシュボードエクスポート:BIツール(Tableau、Looker、Metabase)はしばしばHTMLダッシュボードエクスポートを提供します — ボードデッキに含めるためにそれらをPDFに変換します。
- ランディングページモックアップ:静的サイトのランディングページをステークホルダーレビューやフィードバックラウンド用のPDFに変換します。
- フォームレシートと確認:ウェブフォームから保存したHTML注文確認とレシートが、経理添付の準備が整ったPDFになります。
- オンラインドキュメントスナップショット:ドキュメントページ(Stripe APIドキュメント、AWSコンソールリファレンス)をオフラインリファレンス用にPDFとして保存します。
FAQ
HTML内のJavaScriptは変換中に実行されますか?
いいえ。レンダリング前に<script>タグとインラインイベントハンドラー(onclick、onloadなど)を削除するため、ファイル内のあらゆるJavaScriptが削除されます。<a href="javascript:...">URLも削除されます。これは、JSに依存する動的コンテンツ(例:Chart.js経由でレンダリングされるチャート、遅延読み込み画像)がPDFに表示されないことを意味します。JSレンダリングコンテンツの場合は、まずブラウザでページをレンダリングしてスクリーンショットツールを使用するか、利用可能であればページの静的エクスポートオプションを使用してください。
外部画像とフォントは読み込まれますか?
リソースが同一オリジンか、CORS有効ヘッダーで提供されている場合のみ。ほとんどのCDNホストのウェブフォント(Google Fonts、Adobe Fonts)と画像はCORSを設定しているため、通常は正しく読み込まれます。同一ドメインのリソースは問題なく動作します。CORSヘッダーのないクロスオリジンリソースは読み込みに失敗し、PDFで空白になります。すべてが確実に読み込まれるようにするには、変換前に画像をデータURI(data:image/png;base64,...)として埋め込んでください。
「背景を含める」をオンにすべきですか?
デフォルトはオフで、ブラウザの印刷ダイアログと一致します。HTMLのデザインがページレベルの背景を意図的に使用しているとき — テーマ付きメールテンプレート、マーケティングランディングページ、ダークモードダッシュボード — はオンにしてください。プリンターのインクを消費するだけのコンテンツ(記事、ドキュメント、コードリスト)の場合はオフのままにしてください。
結果のPDFのテキストは選択可能ですか?
いいえ — html2canvasパイプラインはレンダリングされたHTMLをラスタライズするため、結果のPDFページは画像です。テキストは選択不可、検索不可、スクリーンリーダーでアクセス不可です。これは完全なスタイル忠実度のためのトレードオフです。文書から選択可能なテキストが必要な場合は、TXT to PDF(プレーンテキスト入力)を使用するか、HTMLのテキストコンテンツを別途保存して変換してください。
複数ページ出力はどう動作しますか?
長いHTMLコンテンツは1つの背の高いcanvasとしてレンダリングされ、ページ高さのチャンクにスライスされます。各チャンクが1つのPDFページになります。スライスはcanvasのピクセル境界で起きるため、コンテンツが段落の途中や画像の途中でページ区切りで分割されることがあります。CSSの@pageルールやpage-break-inside: avoidは尊重されません — それはサポートに別のレンダリングライブラリが必要なブラウザ印刷エンジン機能です。
HTMLファイルはサーバーにアップロードされますか?
いいえ。変換は完全にブラウザ内で実行されます — DevToolsのネットワークタブを開けば、初回使用時にhtml2canvasチャンクが一度ダウンロードされ、HTML自体が参照する外部リソース(画像、フォント)以外には送信リクエストがないことが確認できます。HTMLファイルのコンテンツがPikowlのサーバーに送信されることはありません。
なぜファイル数の上限がTXTやMarkdownより少ないのですか?
HTMLレンダリングが最も重いステップです。html2canvasはDOM全体を走査し、すべての要素のスタイルを計算し、外部リソースをダウンロードし、すべてを単一のcanvasにラスタライズします。複雑なページではこれが1ファイルあたり数秒かかり、プロセス中にかなりのメモリを消費します。30ファイルの上限(TXT/MDの50に対して)は、モバイルデバイスでバッチ変換を管理可能に保ちます。
数字で見る
- HTML5は2014年10月にW3C勧告となり、フォーマットの現代的な時代を画しました。WHATWGのHTML Living Standardが今では権威あるバージョンで、継続的に進化しています。
- html2canvas(このツールが使用するレンダリングライブラリ)はnpmから週500万回以上ダウンロードされており、ウェブエコシステム全体でブラウザ内DOM→画像変換の事実上の選択肢になっています。
- ブラウザの印刷ダイアログは、ページ背景がプリンターのインクを消費しテキストを覆い隠すため、「背景のグラフィック」をデフォルトでオフにしています — PikowlのHTML to PDFはこの慣例を反映し、完全なデザイン忠実度が必要なときに利用できるトグルがあります。