如何用React精确实现浏览器打印特定页面或内容区域的操作？

本文共计1072个文字，预计阅读时间需要5分钟。

前言+近期着手项目任务的打印功能，在此记录，本文字介绍基于React的一种调用浏览器打印页面指定内容的方法。+整体思路：+通过构建一个隐藏的元素（该元素包含需要打印的内容），实现指定内容的打印功能。

前言

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

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

1. 构建待打印元素

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