☰

Chrome 印刷 - PDF として保存 - 1 ページに印刷

tag-icon • tag-icon google-chrome print-to-pdf
Chrome 印刷 - PDF として保存 - 1 ページに印刷

Chrome で「PDF として保存」を使用して印刷する場合、ページのサイズを Web ページのサイズに合わせるにはどうすればよいですか?

PDF を生成しようとしているページにはたくさんのグラフがあり、紙に印刷するつもりはありません。見栄えの良い文書を生成したいだけです。しかし、PDF として印刷しようとすると、グラフがすべてのページから切り離されてしまいます。すべてを 1 ページに印刷したいのですが、これは可能ですか?

答え1

注意: このアプローチは半ば非推奨です

Chrome は、印刷セクションでページ サイズをカスタマイズできる機能が非常に優れています。

そのため、印刷サイズをカスタマイズできます。32 インチ x 80 インチの Web ページを PDF に印刷する必要がある場合、この機能は本当に役立ちました。

手順は次のとおりです (ページのフロントエンドを変更するので、少し技術的であり、HTML の変更も必要になります)

  1. Ctrl + p で印刷ダイアログを開く
  2. 「詳細設定」をクリックして下部のセクションを展開します

  3. 「用紙サイズ」ドロップダウンを右クリックし、「検査」をクリックします
    （注: これにより、Chrome の開発ツールが開きます）。

  4. 開発ツールでは、<select class="md-select">...</select>が強調表示されるので、その横にある矢印をクリックしてそのセクションを展開します。

  5. 展開すると、最初のオプションは次のようになります。
    <option value="{&quot;height_microns&quot;:1189000,&quot;name&quot;:&quot;ISO_A0&quot;,&quot;width_microns&quot;:841000,&quot;custom_display_name&quot;:&quot;A0&quot;}">A0</option>
  6. それを右クリックして、「HTML として編集」を選択します。テキスト編集セクションが開き、前のオプションのテキストがすべて強調表示されます。

この時点で、必要なのは、既存のオプションの後にこのリストにカスタム オプションを挿入することだけです。つまり、独自のオプションを貼り付けることになります。残念ながら、スーパーユーザーは stacksnippets を許可していないため、貼り付けるためのスニペットを作成するツールを構築することはできません。

変更する必要がある値はわずかです。以下では名前を CUSTOM に変更しました。

以下のテキストに、HHHHHHHHH と WWWWWWWWWW があることに気付くでしょう。これらは、希望する寸法に関連付けられたミクロン値に手動で変更する必要があります。この Web サイトには、便利な無料のミクロン計算機が用意されています。https://www.calculateme.com/length/inches/to-microns/

私の身長は80インチ = 2,032,000ミクロンなので、HHHHHHHHHHを2032000に置き換えました。

私の幅は32インチ = 812,800ミクロンだったので、WWWWWWWWWWではそれを812800に置き換えました。

独自の関連する値を見つけて、以下のテキストでも同じことを行なってください。

<option value="{&quot;height_microns&quot;:HHHHHHHHHH,&quot;name&quot;:&quot;ISO_CUSTOM&quot;,&quot;width_microns&quot;:WWWWWWWWWW,&quot;custom_display_name&quot;:&quot;CUSTOM&quot;}">CUSTOM</option>

テキストの準備ができたら、「HTML として編集」テキスト エディターのセクションの直後に配置します。完了したら、テキスト編集領域の外側の任意の場所をクリックして、変更をレンダリングします。

この時点で、ドロップダウン メニューをクリックして、カスタム オプションを確認し、選択することができます。

これは大変そうに聞こえますが、実際には非常に簡単で、本当にカスタマイズされたものから PDF を作成する場合は、かなりの時間を節約できるはずです。

重大なアップデート

ある時点で、Google Chrome の印刷プレビューがよりテスト駆動型になるように更新されたようです。その結果、カスタム値を追加するとテスト条件に違反し、何も起こりません。このアプローチは、示されているようには機能しなくなりました。

ここでの要件は、テスト アサーションの防止を回避するために、デバッガーを使用して値を文字通り傍受することです。申し訳ありませんが、ここで記述するには詳細すぎるため、ここでは説明できません。また、現在機能している修正を公開すると、その後何らかの理由で保護される可能性があることも懸念しています。

Google 様、もし本当にこれらの投稿をご覧になっているのであれば、カスタム ミクロン オプションを許可していただければ幸いです。

答え2

今のところ、私がやっていることに適した Chrome 拡張機能を見つけました。これを使うと、ページ全体のスナップショットを撮って、それを PDF または画像として保存できます。この方法の唯一の欠点は、ページ (PDF の場合でも) 全体が画像であることです。そのため、テキストを選択したり、ベクター スケーラブルにしたりすることはできません。

他の人の役に立つかもしれない拡張機能は次のとおりです: ウェブページのスクリーンショットを丸ごと撮る - FireShot

答え3

現代的で唯一のソリューション:

ページソースの任意の場所に次のCSSを挿入します（またはページ自体で使用される CSS ファイル）寸法を任意の値に変更します。

@page {
    size: 4.0in 25.5in; /* <- You can change these dimensions */
    margin: 0;
}

ここで、「PDF として保存」オプションを試すと、ページがその寸法になることがわかります。

答え4

Chrome の印刷ダイアログには、ページ レイアウト用の標準的ではあるが小さなツール セットがあります。これらは印刷を選択する場所のすぐ下にあるため、見逃すことはないでしょう。

ここに画像の説明を入力してください

レイアウトでは、縦向きと横向きを選択できます。

用紙サイズがあり、さまざまな標準サイズから選択できます。

余白があり、ページの印刷されない余白を調整できます。

おそらくこれに最も役立つのは Scale です。

さらに、ヘッダー/フッターや背景グラフィックを含める/除外するための追加オプションもあります。

Web ページの印刷は、ページ デザインの多くが実際にはページ コードで明示的に定義されており、印刷レイアウト用に最適化されていないため、不正確な技術です。これらの明示的に定義されたページ レイアウト コードは、プログラムがドキュメントのレイアウトをより細かく制御できる、ワード プロセッサやその他のアプリケーションで慣れている印刷レイアウト オプションと競合します。

関連情報