react控制打印机打印_React如何实现浏览器打印部分内容详析

前言

近期着手项目任务的打印功能，在此作个记录，本文介绍基于React的一种调用浏览器打印页面指定内容的方法。

整体思路： 通过构建一个隐藏的元素(该元素包裹需打印的内容)，当打印行为触发时，将页面其他的一些不需要打印的元素隐藏，然后将需打印的元素追加到body中，打印完成后，再恢复初始状态即可。浏览器打印的本质还是将web页面中的元素打印出来而已。

1. 构建待打印元素

在页面中构建一个display为none的元素，里面的内容为你需要打印的内容。我们还需要设置包裹打印内容的元素的ref属性，以便于后面获取到元素。

(this.printRef = el)}>

{ 打印内容 }

2. 打印动作触发时的处理

处理流程：

获取待打印元素；

将根元素隐藏；

将待打印元素追加到body中；

调用浏览器的打印预览；

预览界面关闭后，将待打印元素从body中移除，将原始页面恢复。

let printView = this.state.printRef //获取待打印元素

document.querySelector('#root').className = 'print-hide' //将根元素隐藏

document.body.appendChild(printView) //将待打印元素追加到body中

window.print() //调用浏览器的打印预览

document.body.removeChild(printView