印刷用に別のhtmlページが必要ですか？

Question

私はヘッダーとフッターを除いてプリンタフレンドリーなページを持っています。ページの本文のみを印刷し、背景色を印刷しない印刷ボタンを追加できますか？それとも、新しいページにリンクしてからもう一度クリックする必要がありますか？もし私がそれを避けることができれば、私はむしろこれらの余分なステップを導入したくない。

Answer 1

印刷用に別のhtmlページが必要ですか？

不要です。異なるprint CSSを使用すると、印刷時に特に使用されます。このCSSの中にあなたがあなたのページ上のさまざまな要素の外観をカスタマイズできます。

<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 

media="print"はこのCSSを印刷する場合にのみ適用されることを意味します。

print.cssライブラリをチェックアウトすることもできます。

Answer 2

印刷スタイルシートを使用することをお勧めします。ここで

は、これは私があなたのスタイルシートが画面と印刷のために分離しておくことができ、この方法をお勧めしますルートである

http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet

助けるかもしれないリンクです。

Answer 3

これはCSSですべて実行できます。印刷するメディアを設定するだけです。

@media print 
{ 
    /* Print specific styles go in the braces */ 
} 

Answer 4

私は背景に色なしでのみページの本文、および を印刷する印刷ボタンを追加することはできますか？

あなたは介してプリンタ - 指定のスタイルを設定することができます：あなたは、印刷中の動作を変更したい要素にprintクラスを適用します

@media print { 
.print { 
    background:#fff; 
    } 
} 

。

Answer 5

print media stylesheetを追加するだけです。

独自のボタンを追加したり、重複したページを作成したりする必要はありません。ブラウザの印刷コントロールは完全にうまくいきます。

Answer 6

新しい印刷固有のスタイルシートを追加し、そのスタイルシートに、ユーザーがページを印刷するときに表示したくない要素を非表示にすることができます。 print.cssを書き、何を印刷したいと何がいけないことを指定した方がよい

http://meyerweb.com/eric/articles/webrev/200001.html

Answer 7

：

はここでそれを行う方法についての便利なリンクです。

は

• http://printstylesheet.com/
• http://line25.com/tutorials/handy-tips-for-creating-a-print-css-stylesheet
• http://www.onextrapixel.com/2009/05/05/how-to-create-a-simple-print-css-for-your-site/
• http://www.intensivstation.ch/en/css/print/

Answer 8

（ダーリンが指摘したように）すべてを行う必要があるリンクがためにCSSファイルを追加するにはを参照してください。あなたの印刷レイアウト。あなたのCSSファイルが唯一の正しいmediaタイプを使用して印刷するために呼び出されたことを確認する必要があります。

Answer 9

これは、私は通常、いくつかのjQueryを使ってそれを行う方法です。

$(function(){ 
// Hook the print link 
$("a").attr("href", "javascript:void(0)").click(function(){ 
// Print the DIV that you want to be printble 
// Maybe you want to change the style of that printable div. 
    $(".printable").print(); 
// Cancel click event. 
return(false); 
}); 
}); 

考えはということですあなたは印刷可能にしたいと思っているdivを持っていて、印刷ボタンを引っ張って、あなたがそのdivで必要なことをしてからそれを印刷します。

Answer 10

あなたはこのような何か試すことができます。

@media print { 
    body { 
     background-color: white 
    } 

    div.header, 
    div.footer { 
     display: none 
    } 
}