如何用css寫打印樣式

打印樣式

打印樣式就是針對網頁被打印時設置給文檔的樣式，由於打印時是顯示在紙上，跟屏幕還是有區別的，對於有打印需求的網頁往往需要設置專門的打印樣式來適配頁面。

@media print

聲明自己是打印樣式有兩種方法：在css文件中可以使用@media print,在html文件的style標簽中寫上media=print屬性:

<style media="print">...</style>

當寫有打印需求的頁面時，最好將css分成兩類，一類是@media screen ,另一類是@media print ,如果有兩種media通用的css，在設置print的樣式時，因為通用樣式的層疊，可能會導致樣式失效，這時需要采用!important來確保瀏覽器采用print下面的樣式，舉個例子:

nav.nav{
    color: red;
    display: block;
}

@media print{
    .nav{
       display:none!important;
   }
}

上面的例子中去掉!important時，由於通用cssnav.nav的權重更高，會導致print中的樣式無效，查看效果。所以，或者將screen和print樣式完全分開。或者當打印樣式無效是使用!important.
2

@page

@page可以控制打印頁面的邊距大小，就像word中那樣:

  @page {
    margin: 1cm;
  }

-webkit-print-color-adjust

-webkit-print-color-adjust是一個在瀏覽器中強制打印背景顏色和字體顏色的css屬性，當打印出來的某些元素的背景顏色沒有被顯示時，可以使用-webkit-print-color-adjust:exact

bootstrap對打印樣式的支持

參考bootcss網站的打印類，bootstrap對打印樣式主要提供了幾個class，方便我們在頁面被打印時顯示或隱藏一些元素：

class	瀏覽器	打印機
.visible-print-block .visible-print-inline .visible-print-inline-block	隱藏	可見
.hidden-print	可見	隱藏

### bootStrap留下的坑

如果你的項目使用了bootstrap,打印頁面上的A標簽可能也會顯示出來，如果這不是你想要的，可以看這里