快捷導(dǎo)航

React如何實現(xiàn)瀏覽器打印部分內(nèi)容詳析

更新時間：2019年05月19日 11:48:21 作者：碼飛_CC

這篇文章主要給大家介紹了關(guān)于利用React如何實現(xiàn)瀏覽器打印部分內(nèi)容的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

近期著手項目任務(wù)的打印功能，在此作個記錄，本文介紹基于React的一種調(diào)用瀏覽器打印頁面指定內(nèi)容的方法。

整體思路：通過構(gòu)建一個隱藏的元素（該元素包裹需打印的內(nèi)容），當(dāng)打印行為觸發(fā)時，將頁面其他的一些不需要打印的元素隱藏，然后將需打印的元素追加到body中，打印完成后，再恢復(fù)初始狀態(tài)即可。瀏覽器打印的本質(zhì)還是將web頁面中的元素打印出來而已。

1. 構(gòu)建待打印元素

在頁面中構(gòu)建一個display為none的元素，里面的內(nèi)容為你需要打印的內(nèi)容。我們還需要設(shè)置包裹打印內(nèi)容的元素的ref屬性，以便于后面獲取到元素。

<div style={{ display: 'none' }}>
 <div ref={el => (this.printRef = el)}>
 { 打印內(nèi)容 }
 </div>
</div>

2. 打印動作觸發(fā)時的處理

處理流程：

獲取待打印元素；
將根元素隱藏；
將待打印元素追加到body中；
調(diào)用瀏覽器的打印預(yù)覽；
預(yù)覽界面關(guān)閉后，將待打印元素從body中移除，將原始頁面恢復(fù)。

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

對應(yīng)的CSS設(shè)置：

@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可以自己設(shè)置紙張的大小，如果是A4紙可以直接設(shè)置值為A4，媒體查詢@media print中設(shè)置的是打印時的樣式，因為打印設(shè)備知道其輸出區(qū)域的物理大小，所以使用厘米（cm）、毫米（mm）、英寸（in）等作為打印設(shè)計的單位完全可行。

補充（其他原生的打印方法）

直接替換body的內(nèi)容為要打印的內(nèi)容，之后再重新刷新頁面。

const old = window.document.body.innerHTML //備份原來的頁面
window.document.body.innerHTML = ''
window.document.body.appendChild(/* 將你要打印的內(nèi)容附加到這 */)
window.print() //調(diào)用print()函數(shù)時，會跳出打印預(yù)覽的界面，以下的代碼被阻塞，關(guān)閉預(yù)覽界面后繼續(xù)執(zhí)行
window.document.body.innerHTML = old
window.location.reload() //重新加載舊頁面

打開一個新窗口，將打印內(nèi)容放到新窗口打印，打印結(jié)束后關(guān)閉新窗口

const newWindow = window.open("打印窗口", "_blank")
const docStr = '<div>test</div>' //需要打印的內(nèi)容
newWindow.document.write(docStr)
const styles = document.createElement("style")
styles.setAttribute('type', 'text/css') //media="print"
styles.innerHTML = ''
newWindow.document.getElementsByTagName('head')[0].appendChild(styles)
newWindow.print()
newWindow.close()

以上兩種方法可能會造成CSS樣式應(yīng)用無效的問題。

3. 注意點

第二小節(jié)的步驟2中的意思是：將頁面中所有不需要打印的元素隱藏，特別注意像模態(tài)窗Model這些元素，也要為它們加上 'print-hide'className屬性。

如果需要在特定位置強制分頁打印，可以嘗試在對應(yīng)元素上設(shè)置page-break-before：always !important、page-break-after：always !importantCSS屬性，該屬性只對塊級元素有效。

進(jìn)入打印預(yù)覽后，我們無法獲知用戶最終是選擇了打印，還是選擇了取消。這里若有人知道解決方法的話，歡迎留言。