web-dev-qa-db-ja.com

画面スタイルシートを使用して印刷するにはどうすればよいですか？

私が使用する多くのWebサイトには、印刷メディア用のスタイルシートが本当に悪いのですが、それらのスクリーンスタイルシートは非常に優れています。

ブラウザに印刷スタイルシートを無視して画面スタイルシートで印刷するように指示する方法はありますか？

この2つの違いをクライアントに示したい場合にも、このようにしたいと思います。

browserprinting
53
vy32

Chrome Developer Tools（Ctrl+Shift+I）が動作することがわかった唯一のものです。

  1. media="screen"のすべてのインスタンスを検索し、その属性を削除します。
  2. 次に、media="print"を検索して、リンク全体を削除します。
  3. 次に、印刷してみます。

これにより、通常、ページに画面スタイルが設定されます。

本当に印刷スタイルを無効にしたいだけの場合は、Web Developer拡張機能をインストールできます（FirefoxとChromeにはバージョンがあると思います）。印刷スタイルを無効にするボタンがあります。ただし、「画面」スタイルを印刷に拡張しないため、ほとんどの場合、期待どおりに機能しません。

24
James

以下 James idea ですが、jQueryを使用しています：

$('*[media="screen"],*[media="print"]').attr('media', '')

ページにjQueryがない場合は、挿入します。

var el = document.createElement('script'); el.type = "text/javascript"; el.src = "http://code.jquery.com/jquery-latest.pack.js"; document.body.appendChild(el);
18
Leo Gallucci

開発者ツールでメディアエミュレーションを直接選択する新しい方法があります。参照 https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/ =

15
kitchin

Chromeで簡単な方法を見つけました。

CSSツールのエミュレートで、開発者ツール>レンダリング>「画面」を選択します。

次に、印刷してみます。印刷CSSではなく画面CSSを選択します。

8
dj rock

レオには 良いアイデア がありましたが、それはまったく何もしません ジェームズは言った ：それはあるはずです

$('*[media="screen"]').attr('media', '');$('*[media="print"]').remove();

ヒント：簡単に使用できるように、以下をブックマークレットとして保存します。

javascript:var%20el=document.createElement('script');el.type="text/javascript";el.src="http://code.jquery.com/jquery-latest.pack.js";document.body.appendChild(el);setTimeout(function(){$('*[media="screen"]').attr('media','');$('*[media="print"]').remove();},%202000)

これにより、jQueryがプリロードされ、完了するまで2秒待機しますが、この待機時間が十分でない場合は、もう一度実行するだけで、jQueryがロードされます。

5
Bastian Blankenburg

  1. 何でもする ジェームズは言った ;）

    Chromeデベロッパーツールの設定（右下隅）を開いて出力を確認し、[上書き]で[CSSメディア印刷のエミュレート]オプションを選択できます。このオプションを切り替えることで、印刷を比較できますと画面表示。楽しんでください！

  2. このアドオンをインストールします： https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

これで、背景画像と色も印刷されます。

バグ：CSSスプライトでは機能しません。

編集：Chromeは2014年に印刷ビューを変更したので、リンクされたアドオンを使用する必要はもうないと思います。

4
mgutt

@media printと@media screenを使用する単一のCSSファイルが含まれるWebサイトでこの問題に遭遇したため、個別の印刷CSSファイルを無効にするソリューションが機能しませんでした。ページを表示している間、CSSを編集して印刷ブロックをコメントアウトすることはできましたが、これらの変更は印刷プレビューに引き継がれませんでした。

私が見つけた解決策は Firefox および Chrome のPrint Edit拡張機能でした。印刷する直前にページを編集でき、ページにWebスタイル（@media screen）を使用するための簡単なボタンが含まれています。

ブラウザーのサイズが約16：9であるのに対し、印刷面は約17:22の比率であり、ページの一部のものが横方向に少し混雑していたため、印刷しているスケールを少し変更する必要がありました。背景色と画像を別々に印刷できるようにする必要もありました

3
Brian S

Webサイトでは、CSSを使用して 別のスタイル を画面上と印刷時に使用するように指定する場合があります。これはしばしば良いことですが、混乱を招き、問題を引き起こす可能性もあります。ページのソースコードを調べて、次のようなものを探します。

@media print {
  *:after {
    color: #000 !important;
    background: transparent !important;
  }

この問題が一般的である理由の1つは、人気のある Bootstrapフレームワーク を使用しているWebサイトが、一般的な bootstrap.min.css ファイルを使用していることです。

探すべき重要なことは@media print。多くの場合、Webサイトの構造は複雑であり、ページをローカルに保存して、再帰的なテキスト検索ツールで検査すると役立つ場合があります。

CSSコードでその場所を見つけたと思ったら、その開発者向け機能を使用して、ブラウザーでページを直接変更できます。 （Chromeで Ctrl+ Shift + I それらを起動します。）

CSSコードを検索し、問題の原因となっている行を削除または無効化します。 「印刷プレビュー」を使用して操作が機能することを確認します。

1
Gruber

Greasemonkeyアドオンをインストールし、以下のスクリプトを使用します。

ここで見つけたスクリプトを変更しました http://www.netsi.dk/wordpress/index.php/2011/07/07/printing-html-pages-make-screen-and-print-appear-the -same /

最後に "screen"を "print"に変更しました（jQueryについては何もわからないので、何も質問しません）。これにより、実際にはスクリーンバージョンがプリンターに送信されます。 PDFに印刷するとき（FoxitまたはNitro Pdfプリンターを使用）、ページサイズを横長モードのTabloid Extraに設定して、PDFサイズが画面サイズとほぼ一致するようにします。楽しい！覚えておいて、私はプログラミングについて何も知らないので、クレジットは元の作者に与えられます。

// ==UserScript==
// @name         Show print version (A Cross Browser Example) (showPrintVersion.user.js)
// @namespace    netsi
// @match http://*/*
// @author       Sten Hougaard
// @description  Simply add #print to the URL. As descriped in my blog post (goo.gl/MEizV) this will activate any media=print stylesheets so that you can see the print version without printing
// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js");
  script.addEventListener('load', function () {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

// the guts of this userscript
function main() {
  var bPrint = (window.location.toString().indexOf('#print')!=-1);  
  if (bPrint) {
    // The user wants to print this page
    jQuery('link[media*="screen"]').attr('media', 'all'); // Enable the screen styling for all media types, including screen.
    jQuery('link[media*="print"]').remove(); // remove any styling related to print
  }
}

// load jQuery and execute the main function
addJQuery(main);
0
xs400