簡単な印刷例

Question

私は単純なhtmlページにprintリンクを提供する必要があります。

ユーザがそれをクリックすると、print previewと表示されるポップアップが表示され、システムプリンタが表示されます。私はwindow.print();オプションで何かを推測しますが、これはプレビューなしでウィンドウの印刷オプションを直接提供します。 ページのプレビューを最初に行い、次にwindow.print（）を呼び出します。 htmlの例が役立ちます...

あなたが提供する例以上に、メディアタイプの印刷も可能です。そのため、通常のhtml色は赤く見えます。しかし、印刷リンクが選択されると、印刷プレビューを青色で表示する必要があります。私はこれがCSSファイルで@media printを使ってオーバーライドされたメソッドかもしれないことを知っています。

ありがとう

Answer 1

印刷プレビュー機能はクライアント固有です。最新のchromeは印刷プレビューを表示しますが、ほとんどのブラウザではprint（）メソッドを呼び出すと印刷ダイアログが表示されます。

印刷スタイリングについては、印刷スタイルシートをお読みください。数年前のEric MeyerによるA-list-apart記事は、まともな例をいくつか挙げると良いスタートです。 http://www.alistapart.com/articles/goingtoprint/

Answer 2

あなたが印刷したいページがreport.htmlであるとします。 GETのパラメタとしてメディアの議論を受け入れるような方法でページを開発する。すなわちyoursite.com/report.html?media=Xのようなもの - この値に応じて、 - Xは'screen'することができ、'print'などXが空の場合、それは「画面」のデフォルト値

書き込み2つのCSSファイル、すなわちscreen.cssとprint.cssを使用することができますメディア引数（X）のうち、screen.cssまたはprint.cssをページにインポートします。

screen.cssでは、 '@media画面' の内側あなたのスタイルのDEFSを書くブロックのように：print.cssで

@media screen { 
    body { 
    ... screen style here ... 
    } 
} 

は、 '@media画面、印刷' ブロックのように内部のあなたのスタイルDEFSを書きます：あなたのreport.htmlをで

@media screen, print { 
    body { 
    ... print style here ... 
    } 
} 

は、window.open('report.html?media=print', ...)を呼び出し、そのonclickに、あなたは印刷ボタンがあるとします。 Ctrl + Pを受け取ると、ドキュメントオブジェクトに添付されているキーダウンハンドラからも同じことをします。あなたのページのonloadでも

、メディアの引数は「印刷」し、その後のようなもの、すなわち、（500ミリ秒を言う）短い遅延の後にwindow.print()をコールされた場合であるかどうかを確認：まさにあなたは何

if(window.location.href.indexOf('media=print')!=-1) { 
    setTimeout(function() { window.print(); }, 500); 
}