最適な記事をオンラインで見つけ、ブラウザの印刷機能を使用して PDF として保存します。結果として得られる PDF は、あなたが読んでいた Web ページとはまったく似ていません。画像がありません。文字が重なってしまいます。画面上ではすっきりしていて読みやすかったレイアウトが、PDF ページではごちゃ混ぜになってしまいます。ブラウザのWeb から PDF への変換は便利ですが不正確で、元の Web ページを複製するのではなく近似した出力を生成します。
ブラウザーの PDF への印刷機能は、画面 CSS ではなく、Web ページの印刷 CSS スタイルシートを使用します。 Web 開発者は、ナビゲーション、サイドバー、広告を削除した印刷専用の簡素化されたレイアウトを作成することがよくあります。この印刷レイアウトは、画面に表示されるものとは大きく異なる場合があります。この違いは意図的なものであり、よりきれいな印刷出力を生成するように設計されていますが、驚くべき場合もあります。
ブラウザの印刷出力が画面表示と異なる理由
Web ページでは 2 つの個別の CSS スタイルシートが使用されます。1 つは画面表示用、もう 1 つは印刷用です。画面スタイルシートは、ブラウザーに表示される内容を制御します。印刷スタイルシートは、印刷または PDF として保存するときに表示される内容を制御します。 2 つのスタイルシートでは、まったく異なるレイアウト、フォント、色、さらにはコンテンツを指定できます。
PDF 形式 変換では、インタラクティブな要素も削除されます。コンテンツを表示するためにクリックまたはホバーする必要があるドロップダウン メニュー、タブ付きコンテンツ、カルーセル、およびアコーディオン セクションでは、不完全な PDF 出力が生成されます。 PDF は、これらの要素の現在表示されている状態 (折りたたまれた状態または非表示の状態) のみをキャプチャします。
驚くべきことのほとんどは印刷スタイルシートで説明されています。
印刷スタイルシートは、ほとんどのレイアウトの驚きの背後にある主な原因です。
最初のページの読み込み後に JavaScript によって読み込まれた動的コンテンツは PDF に表示されない場合があります。無限スクロール ページ、遅延読み込みされる画像、読み込みにユーザーの操作が必要なコンテンツは特に脆弱です。ブラウザーは、現在 DOM にロードされている内容を印刷しますが、これはページ コンテンツ全体の一部にすぎない可能性があります。
一般的な印刷の問題とその解決方法
PDF 出力で画像が欠落するのは、通常、印刷スタイルシートがインクを節約するために画像を非表示にしたこと、または印刷の開始時に読み込まれていなかった遅延読み込み画像が原因で発生します。ページ全体をスクロールして、印刷前に遅延読み込みをトリガーします。ブラウザ開発者ツールの印刷スタイルシートを無効にして、画面レイアウトが印刷に使用されるように強制します。
WukongPDF は、結果の PDF Viewing 出力を処理して、ページの寸法を調整し、不要な要素を削除できますが、印刷キャプチャ中にブラウザが省略したコンテンツを復元することはできません。
リーダー モードを使用してよりクリーンな PDF 出力を実現する
ほとんどのブラウザには、メイン コンテンツを抽出してすっきりとした単一列形式で表示するリーダー モードが含まれています。 PDF に印刷する前にリーダー モードをアクティブ化します。リーダー モードの出力は、完全な Web ページよりもシンプルですが、一貫したテキスト フローと欠落したコンテンツがないため、より信頼性が高くなります。
専用の Web ページから PDF への変換ツールとブラウザー印刷
専用の Web ページ キャプチャ ツールは、ブラウザの印刷機能よりも信頼性の高い PDF 出力を生成します。これらのツールはページを完全にレンダリングし、すべてのコンテンツが読み込まれるのを待ち、印刷レイアウトではなく画面レイアウトをキャプチャします。出力は、画面上に表示されているものにより近くなります。
PDF として正確にキャプチャする必要がある Web ページでは、ブラウザの印刷機能と専用のキャプチャ ツールの両方をテストします。出力を比較します。ある Web ページで最良の結果を生み出すツールが、別の Web ページでは最適であるとは限りません。 Web ページのデザインは多様であるため、すべてのページに完璧に機能する単一の方法はないということになります。
複数ページの Web コンテンツの処理
PDF 出力で複数の印刷ページにまたがる長い記事では、多くの場合、画像が切れたり、文の途中で段落が分割されたりする不自然な改ページが含まれます。ブラウザのページネーション アルゴリズムはコンテンツの境界を認識しません。用紙サイズに基づいて、固定位置でページを分割します。
ブラウザの印刷プレビューを使用して、改ページが発生する場所を特定します。印刷スケール、余白、または用紙サイズを調整して、改ページをより自然な位置に移動します。スケールを 100 パーセントから 95 パーセントにわずかに減らすだけで、最悪のコンテンツ分割を回避できる程度に改ページを移動できます。
多数の PDF ページに分割された記事の場合は、キャプチャ後に PDF エディタを使用して断片化されたコンテンツを結合することを検討してください。個々のページ画像を切り取って、ブラウザーが強制する改ページよりも自然に流れる連続ドキュメントに再組み立てします。
インタラクティブで動的なコンテンツの保存
ビデオ、オーディオ、またはインタラクティブなグラフが埋め込まれた Web ページでは、PDF 出力でこれらの要素が失われます。 PDF は現在の状態の静止画像をキャプチャします。インタラクティブな要素が不可欠なコンテンツの場合は、PDF に元の Web ページの URL を含めて、読者が完全なインタラクティブ バージョンにアクセスできるようにします。
キャプチャされた PDF 内のリンクはクリックできない場合があります。ブラウザーの印刷機能では、テキストがハイパーリンクを保持しないベクター アウトラインまたはラスター イメージに変換されることがあります。既知のリンクをクリックして PDF 出力をテストし、リンクの機能を確認します。リンクが失われた場合は、PDF エディタを使用して手動で追加し直します。
ソーシャル メディアの埋め込み、コメント セクション、および動的に読み込まれた関連コンテンツは、PDF への印刷プロセスで生き残ることはほとんどありません。これらの要素が重要な場合は、スクリーンショットとして個別にキャプチャし、メイン コンテンツのキャプチャ後に PDF に挿入します。
レスポンシブ レイアウトで設計された Web ページは、画面とは異なるレイアウトを印刷エンジンに提供する場合があります。携帯電話ではすっきりと見えるモバイル対応デザインでも、余白が過剰な狭い列として印刷される場合があります。さまざまなブラウザ ウィンドウ幅で印刷出力をテストすると、最適な PDF 出力を生成するウィンドウ サイズを特定できます。
レイアウトに CSS グリッドまたは Flexbox を使用する Web ページは、印刷スタイルシートによって複雑な画面レイアウトが単純化された線形レイアウトに置き換えられることが多いため、印刷時に予期せずリフローする場合があります。画面上で横に並べて表示されていたコンテンツが、PDF では縦に積み重ねられて表示されます。
Google Fonts や Adobe Fonts などの Web サービスから読み込まれたカスタム フォントは、ブラウザーの印刷エンジンでは使用できない場合があります。印刷出力ではシステム フォントが置き換えられ、テキストの外観、行の長さ、改ページが変更されます。
CSS を通じて適用される背景画像とグラデーションは通常、インクを節約するためにデフォルトでは印刷されません。読みやすさのために暗い背景と明るいテキストに依存していたセクションは、背景が削除されて明るいテキストが残ると見えなくなる場合があります。
固定ヘッダーまたは固定ナビゲーション バーを備えた Web ページは、すべてのページの PDF コンテンツの中央に表示されることがあります。これらの要素は、ページ コンテンツではなくビューポートを基準にして配置され、その固定位置は PDF 変換時に失われます。
印刷時のブラウザのズーム レベルは PDF 出力に影響します。 100% ズームで印刷したページは、75% ズームで印刷した同じページとは異なる結果になります。ズーム レベルにより、テキスト サイズとページ数が変わります。
モバイル ブラウザから Web ページを印刷すると、デスクトップ ブラウザからの印刷とは異なる結果が生成されます。モバイル ブラウザは、多くの場合、ページの簡略化されたバージョンを印刷エンジンに提供するためです。
ログインまたはペイウォールの背後にある Web ページでは、印刷された PDF に、認証後にのみ表示されるコンテンツが含まれる場合があります。 PDF は認証されたコンテンツの記録となるため、適切なセキュリティで扱う必要があります。
広告ブロッカー、ダーク モード拡張機能、カスタム スタイルシートなど、Web ページの外観を変更するブラウザ拡張機能は、印刷出力に影響します。印刷された PDF には、拡張機能が表示する変更されたページが反映されます。
Web ページを PDF として保存することは、基本的に、動的メディアの静的形式へのスナップショットです。変換により、その瞬間のページがキャプチャされ、数分後に変更される可能性のあるコンテンツが凍結されます。
アーカイブ目的の場合、Web ページから保存された PDF には、将来読む人が元のソースを見つけられるように、ドキュメントのメタデータまたは最初のページに URL とアクセス日を含める必要があります。
React、Angular、Vue などの重い JavaScript フレームワークを使用した Web ページでは、JavaScript が DOM の構築を完了する前に印刷エンジンがページをキャプチャするため、PDF 出力にほとんど何も表示されない場合があります。ページが読み込まれたように見えてから印刷するまで数秒待つことで、フレームワークにレンダリングを完了する時間が与えられます。
印刷をターゲットとする CSS メディア クエリでは、特定の要素を表示または非表示にすることができます。適切に設計された印刷スタイルシートには、メイン コンテンツが含まれており、ナビゲーション、広告、コメントは含まれていません。印刷スタイルシートの設計が不十分であるか、印刷スタイルシートが存在しない場合は、画面レイアウトに戻り、PDF の固定ページ寸法にうまく変換されない可能性があります。
ブラウザーのキャッシュは、認証が必要なページを印刷するときの PDF 出力に影響します。ブラウザーに資格情報がキャッシュされている場合、印刷出力には認証されたコンテンツが含まれます。セッションの有効期限が切れている場合、印刷出力には、意図したコンテンツの代わりにログイン ページが表示される場合があります。印刷する前に、ページ全体をスクロールしてページの内容を確認してください。
他のドメインからの埋め込み iframe を含む Web ページを印刷すると、iframe コンテンツが表示されるべき空白の領域が生成される場合があります。クロスオリジン制限により、印刷エンジンが異なるドメインの iframe コンテンツにアクセスできなくなります。 PDF 出力には、埋め込まれたコンテンツが画面上にあった空の四角形が表示されます。
重要な Web ページをキャプチャする場合は、PDF に印刷する前に、ブラウザーの [名前を付けて保存] 機能を使用して、完全な Web ページ、HTML、およびアセットを保存します。保存されたコピーは、ページがどのように見えるべきかの参考として機能し、PDF 出力と保存されたコピーを比較して、印刷変換中に失われた部分を特定できます。