React中如何精确打印网页局部内容？

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

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

整体思路：通过构建一个隐藏的元素（应包含需打印的内容），利用浏览器的打印功能实现指定内容的打印。

具体步骤：

1.创建一个React组件，包含一个隐藏的DOM元素，用于包裹需要打印的内容。

2.使用CSS将隐藏元素设置为不可见，但确保其内容可以打印。

3.在需要打印时，将隐藏元素的内容导出为PDF或其他格式，并触发打印操作。

前言

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

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

1. 构建待打印元素

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

<div style={{ display: 'none' }}> <div ref={el => (this.printRef = el)}> { 打印内容 } </div> </div>

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

处理流程：

1. 获取待打印元素；
2. 将根元素隐藏；
3. 将待打印元素追加到body中；
4. 调用浏览器的打印预览；
5. 预览界面关闭后，将待打印元素从body中移除，将原始页面恢复。