media print 設定 – 瀏覽器列印

基本語法

// 列印模式設定
@media print {
    *****css here*****
}
//列印頁面設定
@page{
    ****setting here****
}

以畫面上有一個需要被列印的元素classname: PrintUnit以及一個不要被列印但要顯示在瀏覽器中的元素classname: NotPrint為例。

@media print {
    // 隱藏不要被列印的元素
    .NotPrint {
       display:none;
    }
    // 要被列印的元素
    .PrintUnit {
       // 元素前要被分頁
       page-break-before:always;
       // 元素本身不能被分頁
       page-break-inside:avoid;
       }
}

@page{
    size: A4 portrait;  //a4尺寸 直式
    margin: 1cm;  //邊距1公分
    orphans:4;   //頁面最後一段段落行數，預設值為2
    widows:2;  //頁面第一段段落行數，預設值為2
}