ウェブページをpdf形式で印刷してCSSスタイルを表示

Question

印刷したいウェブページのセクションを含む新しいタブを開くボタン（printerFriendly）を作成しました。具体的には3つのセクション。

テーブルには、データに応じて色が異なるテーブルの特定の側面が示されており、印刷時にその色を表示するように、CSSが適用されています。この新しいタブでは、印刷プレビューを行い、ページの各セクションを重ねて表示します。セクション間にはスペースがありません。私は解決策を検討していましたが、私はPDF形式で印刷することが1つの方法だと考えています。

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

しかし、これは、メインページの表のためのナビゲーションおよびデータの選択を拡張し、悪いなります それはindex.htmlをするメディア=「印刷」を追加するために私に言いました。

私はページをpdfとして印刷したいと思いますし、各セクションのCSSカラースタイルも印刷したいと思っています。ここで

は、それが印刷できるように、私がこれまでに適用されているCSSです：

@media print { 

    body *{ 
     font-family: 'Open Sans', sans-serif; 
     font-size: 12px; 
     font-weight: 500; 
     color: #101010; 
     background: #f6f5fa; 
     visibility: hidden; 
    } 
    #section-to-print, #section-to-print *{ 
    visibility: visible; 
    } 
    #section-to-print { 
    position:absolute; 
    left:0; 
    top:0; 
    } 

    #section-to-print2, #section-to-print2 *{ 
    visibility: visible; 
    } 
    #section-to-print2 { 
    position:absolute; 
    left:0; 
    top:0; 
    } 

/* 
    #section-to-print3, #section-to-print3 *{ 
    visibility: visible; 
    } 
    #section-to-print3 { 
    position:absolute; 
    left:0; 
    top:0; 
    } 
*/ 

} 

私は＃セクションツーprint3これは第三私は、印刷したい部分が、ときに私であるため、コメントアウトを持っていますこのCSSを適用すると、それは印刷プレビューを行うときに表示される唯一のセクションであり、他の2つは見つからない場所です。

ヒントのご協力をいただければ幸いです。

Answer 1

「secion-to-print」のCSSルールは、すべてposition:absolute;left:0;top:0と表示されます。したがって、そのクラスのテキスト/スタッフは互いに上に印刷されます。一番上のものだけが画面に表示されるか、印刷されます。

これらのルールから3つのステートメントを削除します。次に、項目が順番に印刷されます。

各セクションには、それぞれのルールにpage-break-before:alwaysという改行を付けることができます。

このページには、さまざまな印刷CSSルールに関する良い情報があります。https://www.noupe.com/design/css-perfect-print-stylesheet-98272.html