React實現瀏覽器打印指定內容

近期着手項目任務的打印功能，在此做個記錄，本文介紹基於React的一種調用瀏覽器打印頁面指定內容的方法。

總體思路： 經過構建一個隱藏的元素（該元素包裹需打印的內容），當打印行爲觸發時，將頁面其餘的一些不須要打印的元素隱藏，而後將需打印的元素追加到body中，打印完成後，再恢復初始狀態便可。瀏覽器打印的本質仍是將web頁面中的元素打印出來而已。

1. 構建待打印元素

在頁面中構建一個display爲none的元素，裏面的內容爲你須要打印的內容。咱們還須要設置包裹打印內容的元素的ref屬性，以便於後面獲取到元素。

<div style={{ display: 'none' }}>
    <div ref={el => (this.printRef = el)}>
	{ 打印內容 }
    </div>
</div>
複製代碼

2. 打印動做觸發時的處理

處理流程：

1. 獲取待打印元素；
2. 將根元素隱藏；
3. 將待打印元素追加到body中；
4. 調用瀏覽器的打印預覽；
5. 預覽界面關閉後，將待打印元素從body中移除，將原始頁面恢復。

let printView = this.state.printRef  //獲取待打印元素
document.querySelector('#root').className = 'print-hide'  //將根元素隱藏
document.body.appendChild(printView) //將待打印元素追加到body中
window.print() //調用瀏覽器的打印預覽
document.body.removeChild(printView) //將待打印元素從body中移除
document.querySelector('#root').className = '' //將原始頁面恢復
複製代碼

對應的CSS設置：

@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        min-width: 0;
        width: 210mm; 
        height: 297mm;
    }
    .print-hide {
        visibility: hidden!important;
        display: none!important;
    }
}
複製代碼

其中，@page中的size能夠本身設置紙張的大小，若是是A4紙能夠直接設置值爲A4，媒體查詢@media print中設置的是打印時的樣式，由於打印設備知道其輸出區域的物理大小，因此使用釐米（cm）、毫米（mm）、英寸（in）等做爲打印設計的單位徹底可行。

3. 注意點

1. 第二小節的步驟2中的意思是：將頁面中全部不須要打印的元素隱藏，特別注意像模態窗Model這些元素，也要爲它們加上'print-hide'className屬性。
2. 若是須要在特定位置強制分頁打印，能夠嘗試在對應元素上設置page-break-before：always !important、page-break-after：always !importantCSS屬性，該屬性只對塊級元素有效。
3. 進入打印預覽後，咱們沒法獲知用戶最終是選擇了打印，仍是選擇了取消。這裏如有人知道解決方法的話，歡迎留言。