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

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

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

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

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

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

close()这两种方法可能会导致CSS样式应用程序无效的问题。

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

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

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

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