近期着手项目任务的打印功能,在此作个记录,本文介绍基于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.bod