What HTML/CSS features are supported?

html2pdf supports standard HTML and CSS including layouts, fonts, colors, images, and tables. Advanced features like animations and JavaScript are limited.

How do I include images in my HTML?

Use data URIs for images or ensure external image URLs are CORS-enabled and accessible. Base64-encoded images work reliably.

Will it render my custom fonts?

System fonts and any font loaded by the HTML (for example via `@font-face`) are rendered if they're accessible at generation time. Fonts pulled from external URLs need to load before you click Generate, if you see fallback rendering, wait a moment and try again.

Is there a page limit?

There is no fixed page limit. Processing speed depends on your browser and device; long documents with hundreds of pages will work but may take longer.

Is my HTML uploaded to a server?

No. The HTML you paste and the PDF we generate both stay in your browser, nothing is uploaded. `html2pdf.js` is loaded from a public CDN, but that's the library itself, not your content.

無料 HTML → PDF コンバーター

完全なカスタマイズでHTMLコードをPDFに変換します。ロゴを追加し、ドキュメントをスタイリングし、プロフェッショナルなPDFを生成, すべてブラウザ内で。

HTMLコードを貼り付け:

プレビュー:

プレビューがここに表示されます…

PDFオプション

ページサイズ:

向き:

余白(mm):

ファイル名:

HTML → PDF変換について

PDFは1991年のAdobeでのJohn Warnockの「Camelot」プロジェクトとして始まりました。これは「あらゆるアプリケーションからドキュメントをキャプチャし、これらのドキュメントの電子バージョンをどこにでも送信し、あらゆるマシンで表示および印刷できる共通ファイル形式」を作成するための内部提案でした。WarnockはAdobeの共同創設者であり、(Charles Geschkeと共に)PostScriptの発明者でした。Camelotの目標は、PostScriptの印刷忠実性の保証を取り、紙だけでなく画面でも機能させることでした。Acrobat 1.0とPDF 1.0は1993年6月にローンチし、最初の商用Acrobat readerは50ドルでした。PDFは15年間Adobe管理下の独自フォーマットでした。Adobeは2008年に仕様をISO 32000-1:2008としてISOに公開しました(PDF 1.7はオープン標準として公開)。主要なPDF 2.0(ISO 32000-2)は2017年に登場し、2020年までに改訂が行われました。Adobeは2023年4月に残りの特許権を放棄し、PDFは世界中で完全に特許フリーになりました。PDFは現在、ユニバーサルなポータブルドキュメント形式で、すべてのオペレーティングシステムがネイティブで読み取り、すべてのプリンターが理解し、すべての法律システムが受け入れます。建造物全体はPostScriptスタイルの固定位置レイアウトに依存しています: PDFページ上の各要素は絶対的な(x, y)位置を持ち、ページ座標系に対してベースライン整列され、テキストはフォント + グリフ参照として、グラフィックスはパスコマンドとしてエンコードされます。

HTMLとPDFの間の基本的なミスマッチが、HTML-to-PDF変換を見た目より難しくしている理由です。HTMLはリフローベースで、コンテンツはビューポートに適応し、段落はリサイズ時に再折り返しされ、レイアウトはユーザーがズームすると変わります。PDFは固定レイアウトで、すべての要素が絶対的に配置され、ページ境界は明示的で、リフローは決して発生しません。一方から他方への変換は一連の困難な決定を強います: 長いページをどう分割するか、結果のPDFに埋め込みフォントがどこに住むか、ベクターグラフィックスがどう保存されるか、リンクがクリック可能なままか。これらのほとんどに客観的に正しい答えはなく、正しい動作はユースケースに依存します。

2つのJavaScriptアプローチ: ラスター対ベクター

ブラウザベースのHTML-to-PDF変換には2つのアーキテクチャがあります。html2pdf.js(Erik Koopmans、このツールが使用)は2つの基盤ライブラリをラップします。html2canvas(DOMからレイアウトを読み取り再描画することでHTML要素をキャンバス画像にレンダリングする)とjsPDF(プリミティブからPDFを構築する)です。パイプライン: HTMLからキャンバス画像へ、画像をPDFに埋め込み。結果はピクセル単位で正確で、プレビューで見たものがPDFで得られるものですが、ラスターのみ: PDFのテキストは画像であり、選択可能なテキストではありません。PDF内の単語を検索することはできず、コピー&ペーストもできず、スクリーンリーダーは読むことができません。レポート、証明書、請求書、ワンショットドキュメントの場合は許容できます。テキストが検索可能またはアクセシブルである必要があるドキュメントには、これは重大な制限です。代替アーキテクチャはjsPDFをテキストレンダリングプリミティブ(doc.text()、doc.line()、doc.image())で直接使用し、選択可能なテキストとベクターグラフィックスを持つPDFをゼロから構築します。これはサポートしたいすべてのHTML要素に対してコンバーターコードを書く必要がありますが、検索可能でアクセシブルな「本物の」PDFを生成します。トレードオフ: html2pdf.jsは1行のコードです。jsPDF-直接アプローチは実質的なエンジニアリングプロジェクトです。このツールはテキスト選択可能性よりも使いやすさ(html2pdf.js)を優先します。出力がニーズを満たすかどうかを決定する際にトレードオフを認識してください。

サーバーサイドの代替案、ブラウザサイドで不十分な場合

wkhtmltopdfは長年のオープンソースHTML-to-PDFコマンドラインツールで、サーバー上でHTMLをPDFに変換するWebKitベースのレンダラーでした。無数のCIパイプライン、エンタープライズアプリケーション、PDF生成サービスで使用されました。wkhtmltopdfプロジェクトは2023年にアーカイブされました(GitHubリポジトリは現在読み取り専用)。新しいアプリケーションには推奨されるべきではありませんが、何十億もの既存のPDFがこれで生成されました。Puppeteer(Google、2017年以降のヘッドレスChrome)は、サーバーサイドHTML-to-PDFの現代の業界標準です。Puppeteerのpage.pdf()はChromiumの完全なPDF生成パイプラインを使用し、選択可能なテキスト、埋め込みフォント、ベクターグラフィックス、ハイパーリンクすべてが正しく機能します。これはChromiumに本物のPDFバックエンドがあるからです。Playwright(Microsoft、2020)は、同じPDF生成機能を持つクロスブラウザ同等品(Chromium、Firefox、WebKit)です。Prince(商用、サーバーあたり495ドル)は、CSS Paged Mediaの最高クラスの実装で、マルチカラムレイアウト、ランニングヘッダー/フッター、名前付きページ、脚注、OpenType機能をサポートします。WeasyPrint(オープンソース、Python)は、類似機能を持つクロスプラットフォームの代替案です。Paged.jsは、CSS Paged Media機能をブラウザベースのPDF生成にもたらすポリフィルです。ブラウザの組み込み「PDFとして保存」(ファイル、印刷、PDFとして保存)はすべての中で最も安価なオプションで、無料で、すでにインストールされており、CSS Paged Mediaを合理的によくサポートし、選択可能テキストPDF出力を生成します。1回限りの変換には、サードパーティツールではなく、これがしばしば正しい答えです。

CSS Paged Media、本物の印刷-from-CSSがどう機能するか

W3CのCSS Paged Media Moduleは、ページ分けされた出力専用のCSS機能セットを定義します: ページサイズ、マージン、向きを制御する@pageルール; 本の左右ページの非対称マージン用の@page :left / @page :right; 最初のページの特別処理用の@page :first; ランニングヘッダーとフッター用のmargin box(@top-center、@bottom-rightなど); ページがどこで区切られるかを制御するpage-break-before / page-break-after / page-break-inside(モダン構文break-before: page / break-after: page / break-inside: avoid); 段落区切り制御用のorphansとwidows。ブラウザはCSS Paged Mediaのさまざまなサブセットを印刷パイプラインで実装します。PrinceとWeasyPrintは完全な仕様を実装します。Chromeのpage.pdf()はほとんどをカバーします。html2pdf.js(このツール)は基本的なpage-break-*ルールをサポートしますが、より精巧なmargin-boxおよびnamed-page機能はスキップします。書籍品質のレイアウトを必要とするドキュメント(タイトルページ、章の開始、ランニングヘッダー、脚注)には、PrinceまたはWeasyPrintを使用してください。典型的な「このレポートをPDFとして保存」のケースには、html2pdf.jsで十分です。

一般的な用途:

請求書と領収書。 最も一般的なビジネスケース、注文データで埋められた構造化HTMLテンプレートで、メール送信またはアーカイブ用にPDFとしてエクスポートされます。受信者は単一の請求書の内容を検索する必要がないため、テキストが選択できない制限はめったに重要ではありません。
レポートとドキュメント。 四半期ビジネスレポート、プロジェクト成果物、内部ステータスドキュメント、テンプレーティングシステムから生成され、配布用にPDFとしてエクスポートされます。
証明書。 コース修了証明書、カンファレンス参加証明書、達成バッジ、通常はHTML/CSSスタイリングを持つ1ページで、1回限りのPDFとしてエクスポートされます。
履歴書とCV。 候補者がウェブテンプレート(Notion-export、カスタムビルダー)で履歴書を構築し、提出用にPDFとしてエクスポートします。採用ソフトウェア(ATS)が履歴書PDFからキーワード抽出を行うことが多いため、テキストの選択可能性がここで重要です。
チケットと確認。 コンサートチケット、フライト搭乗券、ホテル確認書、オフラインストレージまたは印刷用にウェブ予約フローからエクスポートされます。
ウェブコンテンツアーカイブ。 オフライン参照または長期保存のために、記事、ブログ投稿、ドキュメントページを固定形式のPDFとして保存します。
メール-to-PDF。 転送またはコンプライアンスアーカイブ用にHTMLメール(ニュースレター、アナウンス)をPDFに変換します。

正直なスコープ: このツールができることとできないこと

このツールはhtml2pdf.js v0.10.1(html2canvas + jsPDFが含まれるバンドルビルド)を使用してブラウザでHTMLをレンダリングし、PDFダウンロードを生成します。結果のPDFはプレビューに対してピクセル単位で正確です。見たものが得られますが、テキストはラスター画像としてレンダリングされ、選択可能なテキストではありません。A4、Letter、A3、A5ページサイズ、縦と横の向き、設定可能なマージン、カスタムファイル名、およびページ区切り制御用の基本的なCSS page-break-*ルールをサポートします。このツールがしないこと、および代替案に手を伸ばすべき場所: PDF内の選択可能 / 検索可能テキスト(サーバーサイドのPuppeteer、またはブラウザの「PDFとして保存」を使用); ランニングヘッダー、フッター、名前付きページ、脚注を持つ書籍品質のレイアウト(サーバーサイドのPrinceまたはWeasyPrintを使用); レンダリングされたHTML内でのJavaScript実行(コンバーターはレンダリングされたコンテンツ内のスクリプトを実行しないhtml2canvasを通してHTMLを実行します); アニメーションコンテンツ(PDFは静的); 印刷コンテキストに依存するメディアクエリ(レンダリングは画面コンテキストで発生)。日常的な「このHTMLからPDFを作る」ニーズには、html2pdf.jsで十分です。本物のPDFテキストとアクセシブル出力を必要とする本番グレードのパイプラインには、サーバーサイドのPuppeteerが現代の標準です。

プライバシー: なぜブラウザのみが重要なのか

PDF生成は一般的なクラウドSaaSビジネスで、DocRaptor、PDFShift、PDFCrowd、API2PDFのようなサービスは生成されたPDFごとに課金します。通常、サーバーファームでヘッドレスPuppeteerを実行し、GPUアクセラレートレンダリングのコストを吸収しているからです。トレードオフは、それらのサービスに送信するHTMLが彼らのインフラ上で処理されることです: 請求書には顧客情報が含まれ、レポートにはビジネスデータが含まれ、証明書には個人名が含まれ、履歴書にはすべてが含まれます。あなたが生成するものは何でも、サードパーティサービスは見ます。このツールはhtml2pdf.jsを介してブラウザ内で完全に実行されます。Generateをクリックする間にDevToolsのネットワークタブで検証してください(唯一の送信リクエストはCDNからhtml2pdf.jsライブラリを取得することです。ロード後はさらなるリクエストはありません)。ライブラリがロードされた後にページをオフラインに(機内モードに)してもコンバーターはまだ機能します。顧客名、財務データ、内部テンプレート、または見知らぬ人のハードドライブにコピーされたくないコンテンツを含むHTMLに対して安全です。

よくある質問

どのHTML/CSS機能がサポートされていますか?

html2pdfは、レイアウト、フォント、色、画像、テーブルを含む標準のHTMLとCSSをサポートしています。高度な機能(アニメーション、JavaScript、メディアクエリ)は制限されています。最良の結果を得るには、外部スタイルシートではなくインラインCSSまたは<style>タグを使用してください。

HTMLに画像を含めるには?

画像にデータURIを使用するか、外部画像のURLがアクセス可能でCORS互換であることを確認します。Base64エンコードされた画像は確実に動作します。例: <img src="data:image/png;base64,…" />

なぜPDF内のテキストが選択できないのですか?

html2pdf.jsが最初にHTMLをキャンバス画像にレンダリングし、その画像をPDFに埋め込むからです。PDFの「テキスト」は実際にはテキストのラスター画像であり、実際のテキストグリフではありません。これは視覚的忠実性のためのトレードオフです: PDFはブラウザのプレビューと正確に同じに見えますが、検索したり、コピーしたり、スクリーンリーダーで使用したりすることはできません。本物の選択可能なPDFテキストには、代替案は: ブラウザの組み込み「PDFとして保存」を使用する(ファイル、印刷、PDFとして保存、選択可能テキストを生成し、無料です); Chromiumの完全なPDF生成パイプラインを持つPuppeteerのpage.pdf()のようなサーバーサイドツールを使用する; またはjsPDFのdoc.text()プリミティブを直接呼び出すJavaScriptを書く(実質的により多くの作業)。

なぜプレビューがPDFと異なるのですか?

プレビューはブラウザでHTMLがレンダリングされる方法を示します。一部のCSS機能はPDFで異なる表示になります。最終的なPDFを生成する前に複雑なレイアウトをテストし、必要に応じて余白やフォントサイズを調整してください。

HTMLにページブレークを追加できますか?

はい、CSSページブレークを使用します: 任意の要素にpage-break-before: always;またはpage-break-after: always;を追加します。CSS3では、より良い互換性のためにbreak-before: page;またはbreak-after: page;を使用してください。

私のHTMLはサーバーにアップロードされますか?

いいえ。貼り付けたHTMLと生成されたPDFはどちらもブラウザ内に留まります。唯一のネットワークリクエストは、ページロード時にパブリックCDNからロードされるhtml2pdf.jsライブラリ自体のためです。ロード後はさらなる送信リクエストはありません。Generateをクリックする間にDevToolsのネットワークタブで検証するか、ライブラリがロードされた後にページをオフラインに(機内モードに)してもコンバーターはまだ機能します。顧客データ、財務詳細、内部ビジネステンプレート、またはサードパーティのPDFサービスに見られたくないコンテンツを含むHTMLに対して安全です。