css

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
}

這篇寫得超清楚
你今天打肉了沒?關於 @media print 的二三事..

寫很多說明 但code是圖片
Print —— 被埋没的Media Type – 腾讯CDC

w3c文件
CSS Paged Media Module