WebブラウザでWYSIWYP（表示内容を印刷）を取得する方法は？

ブラウザーからWebページを印刷するとき、ブラウザーに表示されているコンテンツを正確に紙に印刷することを期待しています。正確に言うと、ブラウザは、高さが無限のキャンバス上を除き、同じページコンテンツを同じ方法でレンダリングし、その後、印刷固有の方法で物理ページに結果を分散する方法を決定することを期待しています。

しかし、それは多くのウェブサイトで起こっていることではありません。完全に異なるものを印刷する場合があります。ブラウザーにこれを実行するように依頼したことはありません。

私が望むものを取得する方法はありますか（スクリーンショットを撮って、それらを一緒に苦労してカットして貼り付け、結果の画像を印刷する以外に）？私が使用しているWebブラウザー（Firefox、Chrome、Safari、IE、またはOpera）に「任意の高さのブラウザーウィンドウでレンダリングするようにこのページを印刷する」ことを伝える方法はありますか？

（PS：参照：スクリーンCSSを使用したブラウザーからの印刷？）

Chromeにはこの機能がデベロッパーツールに組み込まれていますが、非常にわかりにくい場所にあります。

• 開発者ツールを開きます（Windows：F12またはCtrl+ Shift+ I、Mac： Cmd+ Opt+ I）
• DevToolsハンバーガーのカスタマイズと制御メニューボタンをクリックし、[ その他のツール]> [レンダリング設定]（または新しいバージョンでのレンダリング）を選択します。
• [ レンダリング ]タブの[ 印刷メディアのエミュレート ] チェックボックスをオンにして、[ スクリーン ] メディアタイプを選択します。

主にこの答えから引用。違いについては以下をご覧ください。

これで、印刷すると、印刷結果が正確に表示されます。印刷するまで開発者ツールを開いたままにしてください。開発者ツールを閉じると、レンダリング設定は通常にリセットされます。

注：この回答のインスピレーションはhttps://superuser.com/a/568847/176146から得られました。しかし、この答えの実際のテキストはlmeursの答えからです。ほぼ同じですが、答えとは正反対のことをしようとしているため、オーバーライドをPrintに設定する代わりにScreenに設定されています。

ブラウザーに表示されるものをWebページが印刷しないのはなぜですか？

一部のWebページの印刷方法が異なるのは、印刷スタイルシートがあるためです。

印刷スタイルシートとは何ですか？

印刷スタイルシートはWebページをフォーマットするため、印刷時にユーザーフレンドリな形式で自動的に印刷されます。印刷スタイルシートは何年も前から存在しており、多くのことについて書かれています。しかし、それらを実装しているウェブサイトは非常に少ないため、イライラして紙に正しく印刷されないウェブページが残っています。

以下のように印刷スタイルシートを使用しているウェブサイトが非常に少ないことは注目に値します。

• スタイルシートを印刷すると、特に多くのコンテンツ（このような！）があるページで、使いやすさが大幅に向上します。
• セットアップは驚くほど迅速で簡単です

一部のWebサイトでは、印刷しやすいバージョンのページへのリンクを提供していますが、これはもちろん設定および維持する必要があります。また、ユーザーが画面上のこのリンクに気づき、ページを印刷する通常の方法よりも先に使用する必要があります（たとえば、画面の上部にある印刷ボタンを選択して）。ただし、複数のWebページにまたがる記事など、複数のWebページを同時に印刷する場合は、印刷に適したバージョンが便利です。

ソースがWebサイトの印刷時にスタイルシート（CSS）を無効にする

印刷スタイルシートを無効にするにはどうすればよいですか？

最近、画面に表示されているとおりのWebサイトのスナップショットを取得する必要がありました。つまり、背景色、広告、レイアウト全体が必要でした。

1つのオプションは、ページを下にスクロールしながら連続したスクリーンショットを撮り、それをPhotoshopでつなぎ合わせるというものです。これには時間がかかり、低解像度（72dpi）の画像が残ります。

これを行う別の方法は、ページを印刷し、実際に印刷する代わりにPDFを「別名で保存」することです。これは、ページの印刷とページの表示で異なるレイアウトを定義していないページで非常にうまく機能します。

残念なことに、ユーザーがWebサイトを印刷しようとするときに新しいページスタイルを定義する「印刷」スタイルシートをWebサイトに含めることがますます一般的になっています。これはヘッダーで定義され、次のようになります。

本当に自分のニーズに対応するオプションが1つだけ見つかりました。クリスペデリックが開発した「Web開発者」アドオン/拡張機能です。

このプラグインを使用すると、すべてのスタイル、デフォルトスタイル、インラインスタイル、埋め込みスタイル、および印刷スタイルを簡単に無効にできます。

現在、FirefoxとChromeで使用できます。私は主にSafariを使用しているため、Safariの拡張機能がいつか登場することを本当に願っています。Safariで見つけた唯一のオプションは、すべてのスタイルを無効にすることです。これは、ブラウザの最新バージョン（5.0.3）にデフォルトで付属している機能です。これは、開発中にテキストのみのブラウザでサイトがどのように表示されるかを確認するのに役立ちますが、無効にするスタイルを選択する機能はありません。

Firefoxで上記の拡張子を持つ印刷スタイルを無効にする例を次に示します。

ソース印刷スタイルシート-決定的なガイド

Firefox用のプラグインなしのソリューション：デフォルトの開発者ツール（歯車アイコン）でWeb開発者ツールを開き、「ページ全体のスクリーンショットを撮る」にチェックマークを付けます。この部分は一度だけ行う必要があります。

次に、開発者ツールで、カメラのアイコンをクリックします。ページ全体が.pngとして保存されます。ここから、印刷したり、pdfに変換したりできます。

Chrome拡張機能：Webページのスクリーンショットを使用しています。2回クリックするだけで、完全なWebページがjpgまたはpdfに変換されます。自分でスクリーンショットを接着する必要はもうありません。このページは次のようになります。

私も同様の問題に直面していました。現在、Chrome用のPrint FriendlyおよびPDF Extenstionを使用してい ます。

最良の機能は、印刷/ PDFに不要なアイテムを手動で削除できることです。

ここにOpenScreenShootと呼ばれる別のものがあります。GitHubで入手可能なオープンソースであり、非常に長いWebページで機能し、WebpageScreenShotのような他の代替手段が失敗したため、私はそれが大好きです。

（これを一連のSoftware Recommendationsの回答に変える危険性がありますが、これまでのところ、ブラウザー拡張機能Xをインストールして使用することが、実際に機能する唯一の回答のようです:)

最近、この目的のためにOpen Screenshot Chrome拡張機能を使用していますが、とても満足しています。長いQuoraページで問題はありませんでした。

更新（2017年11月）：これは最良のオプションではなくなりました。FirefoxとChromeは、開発者ツールで全画面のスクリーンショットを撮影できるようになりました。

今日、これはFirefoxで次のように実行できます（現在65.0.2を使用しています）。

1. F12を押します。[開発ツール]ペインが表示されます。
2. 右上隅の近くに、カメラのアイコンがあります。ページ全体のスクリーンショットを撮るには、それをクリックします。

で設定、あなたは少しその動作をカスタマイズすることができます（アクセスにそれらは、カメラアイコンの右にある3個のドットをクリックしてください）。デフォルトでは、Firefoxのダウンロードフォルダーにスクリーンショットが保存されます。

カメラのアイコンが表示されない場合は、まず設定で有効にする必要があります。