HTMLをPDFに変換

ページがアクセスできる範囲と、CSSで制御できること

変換処理にはネットワークアクセスがなく、スクリプトも実行しません。どちらも機能不足ではなく、セキュリティ上の判断です。 送られてきたページが要求するものを何でも取得する変換ツールは、当サイトのサーバーからしか見えないアドレスに簡単に誘導されてしまいます。スクリプトを実行する変換ツールは、見知らぬ人のコードを実行することになります。そのため、CDNにリンクされたスタイルシートは届かず、通常のウェブアドレスの画像は読み込まれず、Webフォントは何も言わずに置き換えられ、JavaScriptで自分自身を描画するページは、何かが実行される前のマークアップどおりに変換されます。対処法はいつも同じで、CSSをstyleブロックにインラインで書き、画像をデータURIとして埋め込むことです。ブラウザにはそのための機能が直接用意されています（Firefoxの「名前を付けてページを保存」→「Webページ、完全」、または「MHTMLとして保存」）。1ファイルとして保存したページなら忠実に変換されます。

結果を実際に左右するのは印刷用CSSです。これが知っておくべき2つ目の点です。ページは印刷するかのようにレイアウトされるので、@media printブロックが有効になり、通常の画面用スタイルシートは効かないことがあります。印刷時にナビゲーションを隠すルールがあるページはきれいに変換され、ないページはサイト全体の枠組みまで一緒に入ってしまうのはこのためです。@pageは用紙を制御し、サイズ、向き、余白はここから読み取られます。break-before、break-after、break-inside: avoidがページの区切りを決めるので、分割されては困る表や、新しいページから始めるべきセクションは、完全に自分で制御できます。

背景はよくある抜け落ちです。ブラウザは既定では背景色や背景画像を印刷しないため、スタイルシートに-webkit-print-color-adjust: exactと書かない限り、暗い色のヘッダーが白で変換されることがあります。たった1行で、ブランドの入った文書になるか味気ない文書になるかが変わります。テキストは本物のテキスト、リンクは機能するリンクのままで、マークアップで本物の見出し要素を使っていれば、見出しはPDFのしおりになります。

当サイトのサーバーにつながらない場合は、ページにその旨が表示され、文書をその場で組み立て直します。テキスト、画像、シンプルなレイアウトは保たれますが、本格的なレイアウト処理が必要なもの（grid、flexbox、float、位置指定など）は簡略化されます。シンプルな文書ならほぼ同じように変換されますが、デザインに凝った文書はそうはいきません。

ほかの目的には

公開中のURLを変換するには（このページが意図的にできないことです）、当サイトのサーバーで動いているのと同じ描画エンジンをご自分のマシンで動かしましょう。chrome --headless --disable-gpu --print-to-pdf=out.pdf https://example.comは、ネットワークもスクリプトも有効な状態でページを読み込みます。違いはそれだけで、それこそがこの方法を使う理由です。

ヘッダー、フッター、ページ番号、余白を本格的に制御したいなら、WeasyPrintとPrinceがCSS Paged Media仕様をきちんと実装しています。@top-centerによる柱（ランニングヘッダー）、ページカウンター、脚注、ページ番号に解決される相互参照などです。WeasyPrintは無料で、ほとんどのドキュメント生成パイプラインで使われています。Chromeはそのほとんどに対応していないので、フッターに「3 / 12ページ」と入るような生成レポートには、これではなくそれらのどちらかが必要です。