画面スタイルシートを使用して印刷する方法

私が使用しているウェブサイトの多くは、印刷媒体には本当に悪いスタイルシートを持っていますが、それらの画面スタイルシートはとても良いです。

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

この2つの違いをクライアントに見せたいときにもこれを行いたいと思います。

Chromeデベロッパーツールを使用する（ Ctrl + シフト + 私 私が見つけたのは、これだけです。

1. のすべてのインスタンスを検索 media="screen" その属性を削除します。
2. それから検索 media="print" そのリンク全体を削除します。
3. それから印刷してみてください。

これは一般的に私にスクリーンスタイリングのあるページを与える。

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

以下 ジェームズのアイデア しかし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);

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

レオは 良いアイデア そこに、しかしそれは全く何もしない ジェームズは言った ： そのはず

$('*[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秒待ちますが、この待ちが十分でない場合は、もう一度実行してください。

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

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

2. このアドオンをインストールしてください。 https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk

背景画像と色も印刷されるようになりました。

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

編集：Chromeは2014年に印刷ビューを変更しましたので、リンクアドオンを使用する必要はもうありません。

私はちょうど1つのCSSファイルを使っているウェブサイトでこの問題に遭遇しました @media print そして @media screenだから、別の印刷CSSファイルを無効にする解決策は私のために働かなかった。ページを見ながらCSSを編集して印刷ブロックをコメントアウトすることはできましたが、それらの変更は印刷プレビューに引き継がれませんでした。

私が見つけた解決策は、Print Editの拡張機能でした。 Firefox そして クロム 。それはあなたが印刷する直前にページを編集することを可能にし、Webスタイルを使うための簡単なボタンを含みます @media screen ）ページの

印刷面は約17:22、ブラウザは約16：9なので、印刷時の縮尺をわずかに変更する必要がありました。そのため、ページの内容の一部が少し横に混雑していました。背景色の印刷も有効にする必要がありました。画像を個別に

WebサイトはCSSを使用してそれを指定する さまざまなスタイル 画面上および印刷時に使用する必要があります。これはしばしば良いことですが、混乱を招き問題になることもあります。ページのソースコードを調べて、次のようなものを探します。

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

この問題が一般的である1つの理由は、人気のあるWebサイトを使用していることです。 ブートストラップフレームワーク ユビキタスを使う bootstrap.min.css 上記のCSSスタイルを含むファイル。

探すべき重要なことは @media print。 Webサイトは複雑な構造になっていることが多く、ページをローカルに保存して再帰的なテキスト検索ツールを使って調べることができます。

CSSコードに問題があると思われる場合は、その開発者向け機能を使用してブラウザで直接ページを変更できます。 （Chromeでは Ctrl + シフト + 私 それらを起動します。

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

Greasemonkeyアドオンをインストールして、下記のスクリプトを使用してください。

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

私は最後に "screen"を "print"に変更しました（jQueryについては全くわかりませんので、何も質問しないでください）ので、事実上screenバージョンがプリンタに送信されます。 （FoxitまたはNitro Pdfプリンターを使用して）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);

私はそれをする簡単な方法を見つけました クロム 。

開発者ツールを開く＆gt;レンダリング＆gt; Emulate CSSメディアで 'screen'を選択してください。

今すぐ印刷してみます。 Print CSSではなくscreen CSSを選びます。

有効にしてみてください "Print background (colors & images)" オプションイン Page Setup そしてそれがどのように見えるかを確認してください Print Preview （FF用です）

Jamesに似ています - Chrome Developerツールの "Sources"タブを使ってください。 取り替える のすべてのインスタンス media print と media speech。したがって、navbarsなどを隠すためのすべてのcss変更は、印刷時には適用されません（ただし、テキスト読み上げが使用されている時には適用されます）。

上記のようにこれはJQueryで実行可能かもしれません。

私はcssのCDNを使用しているのでこれは便利です。

Macにはそのための素晴らしいツールがあります。

Paparazziをインストールする => URLをPaparazziにコピーする => =＆gt;として画像を保存します。 PDF

（PDFエクスポートでは、Textは選択できませんが、単なる「画像」ではありません）

https://derailer.org/paparazzi/screenshots

楽しい ：-）