css print

最近フォーム印刷をして、印刷に関する内容を整理しました.
Web印刷といえば、まず@mediaクエリー(すなわち、Web css)が考えられ、メディアタイプprintを使用することで、Webページの一部のみを印刷したり、フォントのサイズを調整したり、レイアウトを変更したりすることで、印刷された紙質ファイルをより簡潔明瞭にするなど、実際の応用上の多くの問題を解決することができます.コードは次のとおりです.

@media print{

    /*        */
    .no-print{
        display:none;
    }
    /*      */
}

しかし、印刷フォームについては、上記の問題を解決するだけでは不十分であり、フォームに印刷ページング時にコンテンツが切断され、ページング表示の上部に白が残っていないなどの問題があることに耐えられない.では、これらの問題をどのように解決しますか?これはcss印刷スタイル、すなわち@pageを使用して、ページボックスの各方面を指定します.
eg 1:寸法、ページ余白設定

@page{
     size: 5.5in 8.5in;       
     margin: 30px;
}

注意:ここでは長さ値で寸法を宣言するほか、紙の寸法キーワード「A 4」または「legal」を使用することができます.キーワードでページ方向「portrait」、「landscape」を指定することもできます.デフォルトはportrait垂直方向です.margin設定が機能しない場合は、プリンタがデフォルト以外の値を設定しているかどうかを確認します.
eg 2:最初のページ、奇数ページ、または偶数ページのスタイルを設定します(トップページを例にとります)

@page :first { 

    /*    */

}

注意:left、rightはそれぞれ偶数ページ、奇数ページセレクタです.
eg 3:表の切断を避ける

@page{
    table{
        page-break-after: avoid;
    }  
}

注意:page-break-afterはtr、tdには機能しないので、全体として現れる場合は同じtableにします.
eg 4:行の文字の破断を避ける

@page{
    table{
        page-break-inside: avoid;
    }  
}

ここではやはり小編のwebフロントエンド学習群をお勧めします:569146385、あなたが白であろうと大牛であろうと、小編は私はすべて歓迎して、不定期に干物を分かち合って、小編が自分で整理した最新のwebフロントエンド資料と0基礎入門教程を含めて、初学と進級中の小さい仲間を歓迎します.忙しくない時間にみんなに迷惑をかけます.