前言

近期著手項(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 = oldwindow.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()