详细分析如何通过React实现部分内容的浏览器打印

前言

最近启动了项目任务的打印功能，在这里做了记录。介绍了一种基于React调用浏览器在页面上打印指定内容的方法。

总体思路：通过构造一个隐藏元素(它包裹了要打印的内容)，当打印行为被触发时，隐藏页面上其他一些不需要打印的元素，然后将需要打印的元素添加到正文中，打印后再恢复初始状态。浏览器打印的本质是打印出网页中的元素。

1.要打印的构建元素

在页面中，构建一个显示为none的元素，里面的内容就是您需要打印的内容。我们还需要设置包装打印内容的元素的ref属性，以便以后获取该元素。

div style={ { display : ' none ' } } div ref={ El=(this。print ref=El)} { print content }/div/div 2。触发打印操作时的处理

处理流程：

获取要打印的元素；隐藏根元素；将要打印的元素附加到正文中；调用浏览器的打印预览；预览界面关闭后，从正文中移除要打印的元素，并恢复原始页面。让printview=这个。state.printref//get要打印的元素文档。query selector(“# root”)。' print-hide'//hide根元素document . body . append child(print view)//将要打印的元素附加到正文窗口. print() //调用浏览器的打印预览文档. body . remove child(print view)//从正文文档中移除要打印的元素. queryselector ('# root ')。类名=' '//将原始页面恢复到相应的CSS设置：

@ page { size: A4margin : 0；}@media print { html，body { min-width : 0；宽度：210毫米；高度：297毫米；} .print-hide { visibility:隐藏！重要；display:无！重要；}}其中，@page中的size可以自行设置纸张大小；如果是A4纸，数值可以直接设置为A4；并且打印样式是在媒体查询@media print中设置的。因为印刷设备知道其输出区域的物理尺寸，所以使用厘米(cm)、毫米(mm)和英寸(in)作为印刷设计单位是完全可行的。

补充(其他本地打印方法)

将正文内容直接替换为要打印的内容，然后再次刷新页面。

const old=window.document.body.innerhtml//Back调出原页面window . document . body . innerhtml=‘’window . document . body . appendchild(/*这里附上你要打印的内容*/) Window.print() //调用print()函数时，打印预览界面会跳出，下面的代码会被屏蔽。关闭预览界面后，继续执行window . document . body . inner html=old window . location . Reload()//重载旧页面打开新窗口，将打印内容放入新窗口打印，打印后关闭新窗口。

const newWindow=window . open(' print window '，_ blank ')const docstr=' div test/div '//需要打印的内容new window . document . write(docstr)const style=document . create element(' style ')style . setattribute(' type '，Text/CSS ')//media=' print ' style . inner html=' new window . document . getelementsbytagname(' head ')[0]。appendchild(styles)new window . print()new window . close()这两种方法可能会导致CSS样式应用程序无效的问题。

3.专心

第二节第2步的意思是隐藏页面上所有不需要打印的元素，特别注意模态窗口Model等元素，并给它们添加‘print-hide’class name属性。

如果需要在特定位置强制分页打印，可以尝试设置分页符前：始终！重要、分页：永远！ImportantCSS属性，仅对块级元素有效。

进入打印预览后，我们无法知道用户最终选择了打印还是取消。如果这里有人知道解决方案，请留言。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。