Logo

菜单

发布于 2026-01-06 7 阅读
0

使用 React-To-Print 让 React 中的打印变得轻松简单

使用 React-To-Print 让 React 中的打印变得轻松简单

介绍

使用常规的 javascript 方法很容易print()触发打印整个窗口或网页。

然而，我们并非总是希望如此。我们可能只想打印网站的一部分内容。事实上，我们甚至可能不希望用户在点击打印按钮之前看到想要打印的部分。在进行所有这些操作时，您仍然希望保持该部分的样式。

所有这些问题都已在 React 中使用React-To-Print npm 包得到解决。我将演示如何使用React-To-Print进行打印，甚至可以在保持 CSS 样式不变的情况下隐藏正在打印的组件。

什么是 React-To-Print？

这是一个 npm 包，旨在让最终用户能够通过弹出打印窗口并复制 CSS 样式来打印组件的内容。

先决条件

本教程假设您已经具备JavaScript和React的基础知识，特别是类组件和函数组件之间的区别。

启动项目

我们将使用之前创建的应用程序作为本教程的入门项目。要将项目设置到本地计算机上，请执行以下操作：


git clone https://github.com/EBEREGIT/react-auth
Enter fullscreen mode Exit fullscreen mode
  • 安装依赖项

npm install
Enter fullscreen mode Exit fullscreen mode
  • 在浏览器中加载项目

npm start
Enter fullscreen mode Exit fullscreen mode

现在你的浏览器上应该可以看到这个界面了。
项目启动初步视图

惊人的！

构建待打印组件

  • 创建一个组件，其中包含一个按钮，该按钮会触发所需组件的打印。

import React, { useRef } from "react";
import { Button } from "react-bootstrap";
import ReactToPrint from "react-to-print";

export default function PrintComponent() {
  let componentRef = useRef();

  return (
    <>
      <div>
        {/* button to trigger printing of target component */}
        <ReactToPrint
          trigger={() => <Button>Print this out!</Button>}
          content={() => componentRef}
        />

        {/* component to be printed */}
        <ComponentToPrint ref={(el) => (componentRef = el)} />
      </div>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

从上面的代码中，我们导入了库，然后在主体中ReactToPrint调用了组件。它包含触发器（可以是按钮或我们选择的任何东西）和内容（这是对要打印的组件的引用）。ReactToPrintReactToPrint

组件下方ReactToPrint是要打印的组件，它通过一个ref连接将其与ReactToPrint内容属性连接起来。

现在，让我们ComponentToPrint用以下代码构建组件：


class ComponentToPrint extends React.Component {
  render() {
    return (
      <div>
        <h2 style={{color: "green"}}>Attendance</h2>
        <table>
          <thead>
            <th>S/N</th>
            <th>Name</th>
            <th>Email</th>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Njoku Samson</td>
              <td>samson@yahoo.com</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Ebere Plenty</td>
              <td>ebere@gmail.com</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Undefined</td>
              <td>No Email</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode
  • 添加以下样式index.css

thead th {
  padding-right: 50px;
}
Enter fullscreen mode Exit fullscreen mode
  • 在文件中按如下方式渲染组件freeComponent.js：

<PrintComponent />
Enter fullscreen mode Exit fullscreen mode

别忘了像这样在文件顶部导入组件：


import PrintComponent from "./PrintComponent";
Enter fullscreen mode Exit fullscreen mode
  • 现在，导航至该位置http://localhost:3000/free，您应该会看到以下屏幕：

带有打印组件的屏幕

  • 点击蓝色按钮后，应该会弹出打印对话框并显示打印预览。打印对话框及打印预览 请注意，打印预览中只包含我们想要打印的组件，CSS 样式也完整保留了下来。太棒了！！！

隐藏要打印的组件

有时，我们不希望用户在点击打印按钮之前看到要打印的内容。这在生成发票、收据等文件时非常有用。要实现此功能，请转到文件PrintComponent中的相应组件PrintComponent.js。

请替换<ComponentToPrint ref={(el) => (componentRef = el)} />为以下代码


  <div style={{ display: "none" }}>
     <ComponentToPrint ref={(el) => (componentRef = el)} />
  </div>
Enter fullscreen mode Exit fullscreen mode

您现在应该看到以下屏幕：
带有隐藏打印组件的免费组件屏幕

如果您点击像我下面这样的打印按钮，您仍然会得到相同的结果：

打印对话框及打印预览

极好的！！！

重要通知！

触发组件（PrintComponent在本例中）可以是函数组件或类组件，但要打印的组件（ComponentToPrint在本例中）必须是类组件才能正常工作。

结论

我们已经了解了如何在 React 中轻松实现打印。不仅可以只打印所需的组件，还可以隐藏组件，而 CSS 样式不会受到影响。

还有许多其他功能我们没有涉及，但都在文档中有所说明。我建议您花些时间仔细阅读文档，尝试其他功能，看看能发现什么。

所有代码都在这里

文章来源：https://dev.to/ebereplenty/printing-in-react-made-easy-with-react-to-print-4b3k
在DEV全球展示挑战赛（由Mux呈...
MongoDB shell 命令（...