浪跡互聯網，是否有過這樣的經歷，遇到自己特別需要或者特感興趣的內容時，或收藏網址或存成筆記或將其打印出來？ 用自己喜歡的方式將內容收藏以便日后查閱。前兩種應該是大家常用的處理方式，而第三者又有多少人實際操作過呢？
當你真的遇到第三者這種情況時，是否發現調出打印預覽時的效果和自己的預期不太相符? 或者是網頁的原樣但卻包含了很多在紙上不需要的內容。 這個時候你會怎么處理呢？ 放棄打印，低碳環保?復制內容到word中重新處理，費時費力費紙費電? 實際上這種情況可以很容易的被避免，那就是對網頁應用–打印樣式
不過你可能會發現，大部分的網頁都沒有針對打印內容做針對處理，究其原因，大致可總結出幾點:
1.打印成本
首先打印機并不像電腦一樣在家庭中普及， 其次紙張與墨水都屬于耗材，尤其是墨水的價格直接影響著打印的成本
2.提倡無紙化
在生存環境日益惡化的今天，低碳環保是一個需要大家關注的問題， 而打印確是費紙費電的一種行為，而且與提倡的無紙化辦公相違背
3.特定性較強
網頁打印并不是用戶的剛性需求，在一些特定的場景網頁打印的機會才會多一些
二、使用場景在網絡上有哪些地方需要網頁打印呢？ 可能大家會有一些印象的，比如優惠券，報銷單據，簡歷文章，教程手冊等
不過大家可以自己思考下是否還有哪些場景是需要打印的？
其實根據不同情況進行分析，需要在紙上瀏覽的內容，在紙上瀏覽可能更方便的內容，而且在紙上閱讀的閱讀體驗及便捷程度可能比在電子設備上好， 這些都是網頁打印存在的支撐。如CDC博客文章頁，華爾茲規范， Prowork排期，百科詞條，TAPD上的一些文檔等等，還有很多需要大家自己去結合自己的業務需求來確定是否需要改進打印的體驗
1.嵌入打印樣式到樣式文件中
@media print { … }
彩色打印
@media print and (color) { … }
2.單獨引用樣式文件
指定多個媒體類型
打印樣式手冊
page-break-after
page-break-inside 設置對象前后及對象本身的分頁處理 https://www.w3.org/TR/2011/REC-CSS2-20110607/page.html#page-break-props
還有一些試驗性質的屬性用來提升打印效果，不過目前還只是一些草案，只有部分屬性被瀏覽器支持
Widows And Orphans
傳統排版印刷的細節處理，避免一些單詞或者行單獨顯示。
Crop Marks And Page Bleed
出血是一個常用的印刷術語，印刷中的出血是指加大產品外尺寸的圖案，在裁切位加一些圖案的延伸，專門給各生產工序在其工藝公差范圍內使用，以避免裁切后的成品露白邊或裁到內容。在制做的時候我們就分為設計尺寸和成品尺寸，設計尺寸總是比成品尺寸大，大出來的邊是要在印刷后裁切掉的，這個要印出來并裁切掉的部分就稱為出血或出血位。
目前在一些設計圖和廣告海報等的打印中應用較多
Box Decoration Break
box-decoration-break: slice | clone;
左側為slice屬性，右側為clone屬性
關于打印排版的內容還有很多，感興趣的同學還可以去w3c官網上查看下具體的工作草案CSS Paged Media Module Level 3
二維碼,可以便捷的訪問原網址
.title h3:after{ content: url(‘qrcode.png’); position: absolute; top: 0; right: 0;}
需注意的是二維碼的位置不要遮蓋到內容
1.客戶端腳本方式打印簡單高效，與打印樣式配合成本最低，滿足日常基本需求，或者是拼接需要打印的內容生成新頁面進行打印
window.print()
2.打印控件專門針對打印進行處理，功能強大，需要安裝相關插件還有就是商用需付費
五、打印實踐
通過前面的簡單介紹,基本可以了解了網頁打印優化需要的知識,下面以CDC博客的文章詳情頁為例,簡單介紹下優化過程
1.查看當前網頁的打印效果 Ctrl+P,如下圖
2.加入通用樣式，根據前面提到的內容，將頁頭，頁尾，側邊欄，評論部分還有一些贊和分享邏輯隱藏掉 display:none !important，只保留文章內容部分
3.增加內容的顯示寬度，設置標題與內容字體排版 width: 100% !important
4.加入二維碼提高便捷性，避免遮擋住文章內容
這樣一個簡單的流程就完成了打印樣式的優化，實際過程非常簡單。不過具體的細節部分還需要根據實際需求進一步打磨
通過實踐,在改進網頁打印體驗過程中得出了一些具體的思考
1.紙上是沒有交互的
不同于網頁的點擊操作，紙張上的內容只適合單純的瀏覽，所以一些復雜的邏輯并不適合出現在紙上。 純粹的內容在紙上更具意義
2.節約打印成本
在保證內容可良好閱讀的前提下盡可能的節省墨水，節約成本
3.打印提示
明確的提示和引導也是改進體驗的關鍵，否則提供的良好體驗有可能就被埋沒了
1.The Print liminator
瀏覽器書簽工具，拖至書簽欄后點擊，調用腳本在當前頁面顯示工具
可輔助移除頁面中的圖片或者不需要打印的元素
應用基本打印樣式(比較適合英文打印)
2.Print Friendly
輸入網站地址，生成對應優化后的打印效果供選擇打印
Save Money & the Environment
網頁打印優化的目的是為了節省成本并且可以提升基礎體驗，希望通過本文可以引起大家的一些關注,并通過我們的技術小力量為產品的完美體驗慢慢打磨，成為精品。
文中提到的主要是PC上關于網頁打印的一些內容，關于移動設備的網頁打印因為實際應用較少，所以這里并未做介紹，但是并不是就可以直接忽略了，像蘋果推出的AirPrint就是一種具體的應用案例。
