React functional component如何单独打印，可用什么NPM包实现？

首先你对react-to-print的认知存在偏差，该包在v2.0.0及之后的版本已经完全支持函数组件，是实现该需求最常用的NPM包，不需要额外找其他工具。

基础使用步骤 #

• 安装依赖：

  npm install react-to-print
  # 或
  yarn add react-to-print
  

• 用useRef创建引用指向待打印的组件，待打印组件需要用React.forwardRef包裹，将ref绑定到组件外层DOM节点上
• 调用包提供的useReactToPrint钩子生成打印触发方法即可

代码示例 #

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';

// 待打印的函数组件，通过forwardRef转发ref
const PrintContent = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <h2>待打印页面标题</h2>
      <p>这里是所有需要打印的内容</p>
    </div>
  );
});

const Page = () => {
  const printRef = useRef();
  // 生成打印触发方法
  const triggerPrint = useReactToPrint({
    content: () => printRef.current,
  });

  return (
    <div>
      <PrintContent ref={printRef} />
      <button onClick={triggerPrint}>打印当前区域</button>
    </div>
  );
};

export default Page;

无第三方包的手动实现方案 #

如果不想引入额外依赖，也可以手动实现核心逻辑：

• 创建一个隐藏的iframe元素插入到页面中
• 将待打印组件的DOM内容、关联的样式规则全部复制到iframe的document内
• 调用iframe的print()方法触发打印，打印完成后移除该iframe即可

注意事项 #

• 若打印内容包含异步加载的图片、字体等资源，需要添加资源加载完成的监听，等所有资源加载完毕后再触发打印，避免出现内容缺失
• 可以通过@media print媒体查询自定义打印专属样式，比如隐藏不需要打印的操作按钮、调整页面边距、设置分页规则等

内容的提问来源于stack exchange，提问作者Sujith Elango