如何使用 react-to-print 实现每个 React 组件单独分页打印-js教程-PHP中文网

如何使用 react-to-print 实现每个 React 组件单独分页打印

本文介绍一种简洁可靠的方案：利用 CSS 的 break-after: page 属性配合单个 ref 容器，让 react-to-print 将列表中的每个组件自动输出到独立打印页，避免 ref 数组导致的类型错误。

本文介绍一种简洁可靠的方案：利用 css 的 `break-after: page` 属性配合单个 ref 容器，让 `react-to-print` 将列表中的每个组件自动输出到独立打印页，避免 ref 数组导致的类型错误。

在使用 react-to-print 进行批量打印时，一个常见误区是试图为多个子元素分别创建 ref 并传入 content 函数（如 qrRefs.current 数组）。但 react-to-print 的 content 选项必须返回一个单一的、有效的 React DOM 元素（即 HTMLElement），而非数组或非组件对象——这正是报错 Argument appears to not be a ReactComponent. Keys: 0,1 的根本原因。

✅ 正确做法是：只用一个 useRef() 指向一个外层容器，并通过 CSS 控制分页行为。以下是完整实现步骤：

定义单个 ref 容器

const qrRef = useRef<htmldivelement>(null);</htmldivelement>

渲染带分页样式的容器与子项
在 JSX 中包裹整个列表，并为每个需独占一页的子组件添加 style={{ breakAfter: 'page' }}（兼容现代浏览器，包括 Chrome、Edge、Firefox）：
```
<div ref="{qrRef}">
  {rowSelection.map((el, i) => (
    <p key="{el.id}" id style="{{" breakafter: margin: padding:>
      ID: {el.id}
    </p>
  ))}
</div>
```

配置 useReactToPrint
直接传入该容器 ref 的 current 值（确保其为有效 DOM 元素）：

const handlePrintQR = useReactToPrint({
  content: () => qrRef.current,
  copyStyles: true, // ✅ 保留内联样式及页面 CSS（含 break-after）
  documentTitle: 'QR-Codes-Print',
});

⚠️ 注意事项：

fp-ts-react

在 React 中使用 fp-ts 的实用模式——hooks、状态、表单、数据获取。在构建使用函数式编程模式的 React 应用时使用。兼容 React 18/

下载

break-after: 'page' 在 Safari 中支持有限（建议测试或降级为 page-break-after: always 以增强兼容性）；
若需首项前不空页，可在第一个上添加 style={{ breakBefore: 'auto' }} 避免冗余分页；
打印预览中若未生效，请检查是否被其他 CSS（如 overflow: hidden 或 transform）干扰分页上下文；
确保 qrRef.current 不为 null —— useReactToPrint 内部已做安全处理，但自定义逻辑中建议判空。