アップロードなし, 100%ローカル, アカウントなし

HTMLをPDFに

HTML を貼り付け、ページサイズを選んで PDF を保存、すべてブラウザ内でレンダリングします。

HTMLをPDFにの仕組み

HTML to PDFは、エディターに貼り付けたHTMLマークアップをDOMPurifyでサニタイズしてスクリプトと安全でない属性を削除し、html2canvas を使ってオフスクリーンキャンバスにレンダリングし、jsPDF でPDFにエンコードします。パイプライン全体がブラウザのタブ内で実行されます。HTMLコードも出力もサーバーには送信されません。そのため、オンラインサービスに貼り付けたくない個人データを含むHTMLスニペットの変換に適しています。

使用する前に出力形式を理解しておいてください。PDFページはベクターテキストではなくラスター画像です。出力のテキストは選択できず、検索もできず、リフローもできません。URLで参照された外部リソース(画像など)はブラウザのCORSポリシーによってブロックされ、読み込まれません。インラインスタイルと埋め込みCSSは機能しますが、カスタムウェブフォントや高度なCSSグリッドを使った複雑なレイアウトは正確にレンダリングされない場合があります。完全なウェブページの忠実な変換には、サーバーサイドで実行するヘッドレスブラウザがより適切なツールです。

HTMLをPDFにの使い方をステップごとに解説

  1. HTMLマークアップをエディターエリアに貼り付けます。
  2. 必要に応じてページサイズ(A4またはLetter)と向きを調整します。
  3. 変換ボタンをクリックします。DOMPurify が HTMLをサニタイズし、html2canvas がレンダリングします。
  4. jsPDF がキャンバス出力をPDFページとしてエンコードするまで待ちます。
  5. PDFをダウンロードします。

よくある使用例

  • ローカルテンプレートからブラウザでHTMLの請求書を生成し、変換サービスにメールを送らずにPDFコピーが欲しい。
  • APIデータから構築したシンプルなHTMLレポートをアーカイブ用PDFとして保存する必要がある場合、HTMLを貼り付けてローカルで変換する。
  • スタイルが適用されたHTMLメールテンプレートを書き、PDFとして印刷した場合の見た目をプレビューしたい。
  • 開発者がサーバーサイドのヘッドレスブラウザをセットアップせずに、テスト中にHTMLフラグメントから素早くPDFを生成する必要がある。

よくある質問

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

変換パイプラインは html2canvas を使ってHTMLをキャンバスビットマップにレンダリングし、そのビットマップを jsPDF でPDFページ内の画像データとしてエンコードします。出力はラスタライズされた画像であり、テキストレイヤーではありません。選択可能なテキストを持つPDFが必要な場合は、Puppeteerなどのサーバーサイドのヘッドレスブラウザが必要ですが、このツールは処理をローカルに保つためにそれを意図的に避けています。

HTMLの画像がPDFに表示されないのはなぜですか?

外部URLから読み込まれた画像はブラウザのCORSポリシーの対象です。画像サーバーが許可するCORSヘッダーを送信しない場合、html2canvas はピクセルデータを読み取れず、画像スロットが空白にレンダリングされます。HTMLに直接埋め込まれたインラインのbase64エンコード画像または同じオリジンの画像にはこの制限はありません。

貼り付けたHTMLはサーバーに送られますか?

いいえ。HTMLはブラウザのメモリ内に留まります。DOMPurify がクライアントサイドでサニタイズし、html2canvas がクライアントサイドでレンダリングし、jsPDF がクライアントサイドでPDFをエンコードします。ブラウザのタブの外に何も出ません。

DOMPurify のサニタイズは何を削除しますか?

DOMPurify はスクリプトタグ、onclick や onload などのイベントハンドラー属性、javascript: URL、コードを実行する可能性のある他の構造を削除します。構造とスタイリングのマークアップは保持されるため、レンダリングされた出力は同じように見えますが、ドキュメントコンテキストに挿入しても安全です。

HTMLを貼り付ける代わりに完全なウェブページのURLを変換できますか?

いいえ。このツールは直接貼り付けたHTMLマークアップで動作します。URLを読み込むにはページのフェッチが必要で、ほとんどのサイトのCORS制限に引っかかり、操作をローカル処理モデルの外に持ち出すネットワークリクエストが必要になります。