快捷導(dǎo)航

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

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

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

前言

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

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

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

在頁(yè)面中構(gòu)建一個(gè)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. 打印動(dòng)作觸發(fā)時(shí)的處理

處理流程：

獲取待打印元素；
將根元素隱藏；
將待打印元素追加到body中；
調(diào)用瀏覽器的打印預(yù)覽；
預(yù)覽界面關(guān)閉后，將待打印元素從body中移除，將原始頁(yè)面恢復(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 = '' //將原始頁(yè)面恢復(fù)

對(duì)應(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，媒體查詢(xún)@media print中設(shè)置的是打印時(shí)的樣式，因?yàn)榇蛴≡O(shè)備知道其輸出區(qū)域的物理大小，所以使用厘米（cm）、毫米（mm）、英寸（in）等作為打印設(shè)計(jì)的單位完全可行。

補(bǔ)充（其他原生的打印方法）

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

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

打開(kāi)一個(gè)新窗口，將打印內(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()

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

3. 注意點(diǎn)

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

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

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