HTML を PDF に変換

思っているより少ないものです。HTML の文書に入っているのは構造と文字です。見出し、段落、表、そして「それ以外はここにある」という参照。見た目を作っているスタイルシートは、たいてい別のファイルで、住所で名前を呼ばれています。書体も、画像も、スクリプトも同じです。

ブラウザーでそのファイルを開くと、ブラウザーがそれらを全部取りに行き、目の前でページを組み立てます。だから完成して見えるし、そのファイルの中にウェブページが入っているように感じます。入っていません。取りに行けない相手に同じファイルを渡せば、残るのは文字だけです。既定の書体で、1 段組で。

技術的には、その参照をたどってスタイルシートも書体も画像も落としてくることはできます。やっていません。理由ははっきり言うだけの値打ちがあります。利用者のファイルの中に書かれた住所を取りに行く変換機は、それが取りに行くと気づいた人に、内部の住所を指させる機械でもあるからです。

ここの変換用のサーバーは、そもそもインターネットに出る経路を持っていません。あなたの文書をどこにも送れないことを保証しているのと同じ性質が、外部のスタイルシートを何もない場所への参照にしています。2 つは同じ 1 つの決定を、裏と表から見たものです。

中身が自分で完結していること。要はそれだけです。CSS はリンクではなく文書の中の `<style>` に入れる。画像は data URI として埋め込む。書体は普通の機械に入っているものを使う。

日本語ではこの 3 つ目が効きます。日本語のウェブフォントは数メガバイトの別ファイルで、Google Fonts や有料の配信サービスから届くものです。ここには届きません。ブラウザーでは Noto Sans JP で表示されていたページが、PDF ではゴシックの既定書体になるのはそのためで、崩れて見える原因はスタイルシートより書体のほうが多いくらいです。

いま見ているページを残したい——記事、領収書、予約の確認、そのうち消えそうなページ——という話なら、このタブを閉じて Ctrl+P、Mac なら Cmd+P を押し、「PDF に保存」を選んでください。

ブラウザーは面倒な部分をもう済ませています。スタイルシートは読み込み済み、書体は解決済み、画像は取得済み、スクリプトは実行済み。完成したページから PDF を作っているのであって、ページを説明したファイルから作っているのではありません。外部の変換機がこれに勝てないのは、組み上がったページを持っていないからです。このページは、手元にある HTML ファイルのためのものです。見ているページには、もっといい道具がすでに開いています。

ファイル自身がスタイルを持っていなければ、標準的な大きさのページに既定の組み方で置かれます。応答すべき画面の幅というものがないので、画面のために作られたレイアウトは、想定していない質問をされている状態になります。

CSS に印刷用の指定があれば、それが使われます。きちんと作られた文書がこの状況のためにすでに持っている仕組みが、まさにこれです。`writing-mode` で縦書きにしている文書も、印刷用の指定として書かれていればそのまま縦で出ます。逆に、JavaScript で配置を決めているものは効きません。何も動かないからです。

文中のリンクはリンクとして残るので、PDF の中の URL は押せます。同じ文書の中の別の場所を指す内部リンクも動きます。

HTML の隣に置いてあったファイルへのリンクは、もう解決しない住所を指します。これは変換の不具合ではありません。隣のファイルに頼っていた文書を、1 つだけ持ち出したときに起きることです。

画面は横にも動き、紙は動きません。ですから幅の広い表は、どこかで折り合いをつけることになります。列が詰まり、ある幅を超えると、表としては完全なのに文字が小さすぎて読めない、という結果になります。

文書のほとんどが横長の表なら、変換のあとではなく前に決めてください。列を減らすか、CSS で用紙を横向きに指定するか。後者は指定どおりに効きます。

この種類のファイルはいちばんうまく変換できます。偶然ではありません。会計ソフトの請求書、分析ツールの帳票、メモアプリの書き出し、HTML メールのひな形は、転送されても壊れないように、中身が自分で完結する形で作られています。

必要なものが 1 つのファイルの中に全部入っている——この変換が求めているのは、まさにその性質です。手元の HTML がその類のものなら、見た目はそのまま出ると思って構いません。

ファイルの中身は実行されません。JavaScript で内容を組み立てるページは、スクリプトが動く前のマークアップが言っていることだけが PDF になります。それはたいてい、ほとんど何もありません。

これは回避すべき制限ではなく、安全のための性質です。誰かがアップロードしたファイルの中にあるコードを、体裁を救うために実行する——それは、やる値打ちのあることではありません。スクリプトが動いたあとにしか中身が存在しないなら、ブラウザーから印刷してください。