最近做表單打印，遂整理了一些打印相關(guān)的內(nèi)容。

說到網(wǎng)頁打印，首先想到的便是@media查詢（即網(wǎng)頁css），通過使用媒體類型print即可解決實(shí)際應(yīng)用的大多數(shù)問題，比如實(shí)現(xiàn)只打印網(wǎng)頁的某部分內(nèi)容，調(diào)整字體大小、修改布局等使打印出來的紙質(zhì)文件更簡潔明了。代碼如下：

@media print{

    /*隱藏不打印的元素*/
    .no-print{
        display:none;
    }
    /*其他打印樣式*/
}

但是，就打印表單來說，僅解決上述問題是不夠的，我們無法忍受表單存在打印分頁時(shí)內(nèi)容被截?cái)?、分頁顯示頂部沒有留白等問題。那么如何解決這些問題呢？這就要使用到css打印樣式了，即@page，用來指定頁面盒子的各個(gè)方面。

eg1：尺寸、頁邊距設(shè)置

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

注：這里除了可以用長度值聲明尺寸，還可使用紙質(zhì)尺寸關(guān)鍵字”A4″或“l(fā)egal”；亦可通過關(guān)鍵字指定頁面方向“portrait”、“l(fā)andscape”，默認(rèn)為portrait垂直方向。當(dāng)margin設(shè)置不起作用時(shí)檢查打印機(jī)是否邊距是否設(shè)置了默認(rèn)以外的值。

eg2：設(shè)置第一頁、奇數(shù)頁或偶數(shù)頁樣式（以首頁為例）

@page :first { 

    /*首頁設(shè)置*/

}

注：left、right分別為偶數(shù)頁、奇數(shù)頁選擇器。

eg3:避免表格斷開

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

注：page-break-after對(duì)tr、td不起作用所以當(dāng)以整體出現(xiàn)的時(shí)候要在同一個(gè)table中。

eg4:避免某行文字?jǐn)嗔?/p>

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