html / css打印樣式

最近做公司后台系統，需要打印貼箱標簽，按照正常打印A4紙的標准，測試的效果不是自己想要的，文字排版布局都亂了，查了一些資料，需要設置的東西我總結了一下：

顯示器(screen)和打印機(printer)是兩種差別很大的設備,所以要設置html/css打印樣式。 screen一般使用邏輯單位比如px，而打印機則應該使用物理單位比如cm（厘米）或in（英寸）。因此如果要精確的控制打印效果就應該使用print css，這是跨平台兼容的標准。不推薦使用瀏覽器插件方式實現打印。

首先引用print css打印樣式：

<!-- 外鏈式寫法： -->
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<!-- style寫法： -->
<style media="print">...</style>
<!-- 使用link標簽規則性能更好 -->

<!--使用@media規則可以在通用的樣式表中,使用@media規則指定樣式用於打印:-->

@media print selector {...}  或者

@media print {
  selector{...}
}

@page規則：

@page規則允許你指定頁面盒子的許多方面,比如規定page的尺寸

 

@page {
    size: 10cm 10cm;<!--通過長度單位cm/in設置-->
    }
@page {
    size: A4;<!--通過紙質尺寸關鍵字設置-->
    }
@page {
    size: A4 landscape;<!--通過關鍵字來指定頁面方向portrait/landscape-->
    }

設置打印分頁：

 

<!--css設置-->
@media print {
        .page {page-break-after: always;}
}

<!--

需要給打印一頁的內容div加上class.page-->