淺談CSS打印（一）

關於CSS+HTML單據打印，通常用於ERP項目的單據打印，雖然如今瀏覽器打印不多應用到項目，也有不少打印插件；這就說明CSS打印應用到瀏覽器不是很完善；特別是Chrome瀏覽器；不少屬性設置不支持；在這方面IE相對於Chrome和FireFox仍是有必定的優點。通常咱們頁面顯示的頁面效果是沒法達到咱們打印的效果的，做爲前端人員開發咱們考慮到一下幾個方面：

• 使用響應式佈局設置打印的效果（由於打印紙張不肯定）
• 在合適的時候打印背景圖片和顏色（對於不須要的打印的背景可節約墨汁，節約渲染時間，優化系統）
• 添加顯示的網址或頁面連接，以供參考（可保存爲.xps,.pdf等文檔格式，打印時，連接地址默認會顯示鏈接title，或文本，不會顯示連接的src屬性值）
• 使用css filter 提升打印的圖形效果

多說無益，直接上代碼：

1. 針對打印的樣式，而不是屏幕顯示樣式

首先，針對打印樣式咱們須要使用媒體查詢（media query）設置。

1. @media print{

//打印樣式

}

2.<link href="/Content/homeprint.css" media="print"  rel="stylesheet"  type="text/css"  />也可用外連接CSS文檔連接打印樣式

2.只針對某些須要重置的元素進行打印設置；

大多數的瀏覽器會自動根據打印更改顏色，以節省打印原料，可是咱們仍是儘量的手工設置一下。爲了達到最佳效果，使顏色清晰明瞭，咱們至少須要包含一下基本的打印樣式。

@media print { body { color: #000; background: #fff; } }

對於打印，大多數狀況下咱們不須要打印整個頁面，只須要打印一個簡潔的可以突出須要信息的頁面，那麼咱們將不相關的部分隱藏掉（如：導航條、背景圖片、文本邊框、視頻文檔等）。

/* Default styles */

 

h1 {

   color: #fff;

   background: url(banner.jpg);

}

 

@media print {

   h1 {

      color: #000;

      background: none;

   }

 

   nav, aside {

      display: none;

   }

}

======================================

在編寫打印樣式表的時候，你要注意要使用釐米或者英寸做爲單位而不是屏幕像素單位，實際的單位對打印很是有用。

爲了保證打印樣式有用，寫CSS樣式使打印的內容距離紙張邊緣，看起來更好，須要使用 @page 這個語法：

@media print｛

@page {

      margin: 2cm;//頁邊距

 

   }

｝

爲了保證不被跨頁打印，如一個標題和內容在頁面底部被分開：

div .main｛page-break-after: avoid;｝//元素後不能分頁

另外一中狀況是要防止圖片過寬而超出紙張邊緣：

img {

   max-width: 100% !important;

}

 若是你是動態加載二維碼或條形碼時；遇到第一次不能打印出二維碼 或條形碼，能夠試着讓條行碼或二位onload後在打印頁面內容，避免頁面第一次打印不能打印出img；

ready 事件的觸發，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件，只是把DOM加載出來了，沒有對圖片渲染出來）。
onload 事件的觸發，表示頁面包含圖片等文件在內的全部元素都加載完成（已完成圖片src的屬性渲染）。

爲了保證不被跨頁打印，如一個標題和內容在頁面底部被分開：

全部的瀏覽器都支持page-break-after/page-break-before ，主要應用於position 值爲 relative 或 static 的非浮動塊級元素。

在佈局中儘量少地使用分頁屬性，而且避免在表格、浮動元素、帶有邊框的塊元素中使用分頁屬性。

可是其屬性值具備兼容性問題：

註釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "left"、"right" 以及 "inherit"。

註釋：Firefox、Chrome 以及 Safari 不支持屬性值 "avoid"、"left" 以及 "right"。

article {

   page-break-before: always;//在元素前插入分頁符

}