前言

創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，先為察隅等服務(wù)建站，察隅等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為察隅企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

近期著手項目任務(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屬性，以便于后面獲取到元素。

 
 (this.printRef = el)}>
 { 打印內(nèi)容 }
 

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

處理流程：

1. 獲取待打印元素；
2. 將根元素隱藏；
3. 將待打印元素追加到body中；
4. 調(diào)用瀏覽器的打印預(yù)覽；
5. 預(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 = '
test
' //需要打印的內(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屬性，該屬性只對塊級元素有效。

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。