基于react用函数式编程封装一个前端打印模板

首先，我们需要安装一个库来帮助我们在前端打印模板。我推荐使用 react-to-print 库，它可以将 React 组件转换为可打印的 HTML。

npm install react-to-print

接下来，我们可以编写一个简单的组件来展示打印内容。这个组件将在页面上显示一个按钮，当用户点击该按钮时，它将打印一个预定义的文本。

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

function PrintTemplate() {
  const componentRef = React.useRef();

  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
  });

  return (
    <div>
      <h1>打印模板</h1>
      <p>这是一个可打印的模板。</p>
      <button onClick={handlePrint}>打印</button>
      <div style={{ display: 'none' }}>
        <div ref={componentRef}>
          <h1>打印模板</h1>
          <p>这是一个可打印的模板。</p>
        </div>
      </div>
    </div>
  );
}

export default PrintTemplate;

在这个组件中，我们使用了 `useReactToPrint` 钩子来创建一个函数，该函数在用户点击按钮时触发打印。我们还使用了 `useRef` 钩子来获取要打印的内容的引用，并将其传递给 `useReactToPrint` 函数。

最后，我们在页面上渲染了一个按钮和一个隐藏的 `div` 元素，该元素包含要打印的内容。当用户点击按钮时，`useReactToPrint` 函数将调用 `content` 属性中的函数，并将其传递给 `printJS` 库来打印。

这就是一个基于 React 和函数式编程的前端打印模板。你可以根据自己的需要修改它来满足你的需求。