webdevqa.jp.net

WebブラウザでWYSIWYP(あなたが見るものを印刷する)を入手するにはどうすればいいですか?

ブラウザからWebページを印刷するときには、ブラウザに表示されている内容とまったく同じ紙に書き込もうとしています。正確には:私は、ブラウザが同じページの内容を同じように、高さが無限のキャンバスを除いて同じようにレンダリングしてから、印刷特有の方法で物理的な紙のページに結果を分配する方法を決定すると思います。

しかしながら、それは多くのウェブサイトで起こっていることでは全くありません。彼らは全く違う何かを印刷するかもしれません。私はブラウザにこれをするように頼みませんでした、そして私はそれが起こりたくありません。

私が欲しいものを手に入れる方法はありますか(スクリーンショットを撮ること、それらを切って貼り付けること、そして結果として生じる画像を印刷すること以外に)。私が使っているウェブブラウザ(Firefox、Chrome、Safari、IE、またはOpera)に「このページを任意の高さのブラウザウィンドウに表示するように印刷する」と伝える方法はありますか。

(PS:また見なさい: スクリーンCSSを使用してブラウザから印刷する か。)

61
reinierpost

Chromeの開発者ツールにはこの機能が組み込まれていますが、非常にわかりにくい場所にあります。

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

これからほとんど引用した 答え 。違いについては下記を参照してください。

印刷すると、印刷された内容がそのまま表示されます。印刷するまで開発者ツールを開いたままにしてください。開発者ツールを閉じると、レンダリング設定は通常に戻ります。

注:この回答のためのインスピレーションは https://superuser.com/a/568847/176146 から来ました。しかし、この答えの実際のテキストは lmeurs ' answer からのものです。それはほとんどまったく同じですが、我々は彼らの答えと正反対のことをしようとしているので、オーバーライドをPrintに設定する代わりに次のように設定されます。 画面

31
Benjamin

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

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


印刷スタイルシートとは

印刷スタイルシートはWebページをフォーマットするので、印刷時に自動的にユーザーフレンドリーな形式で印刷されます。印刷スタイルシートは何年も前から出回っていて、たくさん書かれています。それでも、それらを実装しているWebサイトはほとんどなく、欲求不満なことに紙に正しく印刷できないWebページが残されています。

印刷スタイルシートを次のように使用しているWebサイトはほとんどありません。

  • 印刷スタイルシートを使用すると、特に大量のコンテンツを含むページ(このようなもの)の使い勝手が大幅に向上します。
  • それらは驚くほど早くセットアップが簡単です

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

ソース Webサイトを印刷するときに印刷スタイルシート(CSS)を無効にする


印刷スタイルシートを無効にする方法

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

1つの選択肢は、ページを下にスクロールしながら順次スクリーンショットを撮り、それをPhotoshopでつなぎ合わせることです。これには時間がかかり、低解像度(72dpi)の画像が残ります。

これを行うもう1つの方法は、ページを印刷してから実際に印刷するのではなくPDFとして "名前を付けて保存"することです。これは、ページを印刷するのとページを表示するのとで異なるレイアウトを定義していないページには非常に有効です。

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

私は自分のニーズに本当に応える唯一の選択肢を見つけました: Chris Pederickによって開発された "Web Developer"アドオン/拡張。

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

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

これは、Firefoxで上記の拡張子を持つ印刷スタイルを無効にする例です。

enter image description here

ソース 印刷スタイルシート - 最も信頼のおけるガイド

21
DavidPostill

Firefox用のプラグインなしのソリューション:デフォルトの開発者ツール(歯車のアイコン)で、Web開発者ツールを開きます。あなたは一度だけこの部分をする必要があります。

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

9
Russ

Chrome拡張機能を使用しています。 Webページのスクリーンショット 。 2クリックで完全なWebページはjpgまたはpdfに変換されます。スクリーンショット同士を接着する必要はもうありません。このページはこんな感じです: Webpage screenshot demo

8
Ruut

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

一番の特徴は、Print/PDFで不要なアイテムを手動で削除できることです。

2
Nikhil

今日、これはFirefox(現在65.0.2を使用しています)で次のように行うことができます。

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

設定(これらにアクセスするには、カメラアイコンの右側にある3つの点をクリックします)では、その動作を少しカスタマイズできます。デフォルトでは、スクリーンショットはFirefoxのダウンロードフォルダに保存されます。

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

The screenshot tool in Firefox Developer Tools

1
reinierpost

これは OpenScreenShoot と呼ばれるものです。 GitHubで入手できるオープンソースだからそれが大好きだし、そしてそれは WebpageScreenShot のような他の選択肢が失敗した非常に長いウェブページのために私のために働いた。

1
Vijay Chavda

(これを一連の Software Recommendations answerに変換する危険がありますが、これまでのところ、 ブラウザ拡張機能Xをインストールして使用してください は、実際に有効な唯一の種類の答えです。 )

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

更新(2017年11月):これは最善の選択肢ではなくなりました。FirefoxとChromeは、フルページのスクリーンショットを 開発者ツール に取り込むことをサポートします。

1
reinierpost