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

首先，我们需要安装 antd 和 react-to-print 两个库：

npm install antd react-to-print

接着，我们可以创建一个打印组件 PrintTemplate，它将接收一个 data 属性作为模板数据，并将 data 渲染到模板中。

import React from "react";
import { Button } from "antd";
import ReactToPrint from "react-to-print";

const PrintTemplate = ({ data }) => {
  return (
    <div>
      <h1>打印模板</h1>
      <p>{data.name}</p>
      <p>{data.age}</p>
    </div>
  );
};

export default PrintTemplate;

然后，我们需要使用 ReactToPrint 组件来渲染 PrintTemplate 组件并提供打印功能。我们可以在 PrintTemplate 组件外部包裹一个 ReactToPrint 组件，将 PrintTemplate 作为子组件传入。ReactToPrint 组件还需要一个 trigger 属性，它将触发打印操作的组件，我们可以使用 antd 的 Button 组件作为触发器。

import React from "react";
import { Button } from "antd";
import ReactToPrint from "react-to-print";

const PrintTemplate = ({ data }) => {
  return (
    <div>
      <h1>打印模板</h1>
      <p>{data.name}</p>
      <p>{data.age}</p>
    </div>
  );
};

const PrintButton = ({ componentRef }) => {
  return (
    <ReactToPrint
      trigger={() => <Button>打印</Button>}
      content={() => componentRef.current}
    />
  );
};

const App = () => {
  const componentRef = React.useRef(null);
  const data = { name: "张三", age: 20 };

  return (
    <div>
      <PrintTemplate data={data} ref={componentRef} />
      <PrintButton componentRef={componentRef} />
    </div>
  );
};

export default App;

最后，我们需要将 PrintTemplate 组件包裹在 react-to-print 的 PrintProvider 组件中，这样在打印时可以正确地渲染组件。

import React from "react";
import { Button } from "antd";
import ReactToPrint, { PrintProvider } from "react-to-print";

const PrintTemplate = ({ data }) => {
  return (
    <div>
      <h1>打印模板</h1>
      <p>{data.name}</p>
      <p>{data.age}</p>
    </div>
  );
};

const PrintButton = ({ componentRef }) => {
  return (
    <ReactToPrint
      trigger={() => <Button>打印</Button>}
      content={() => componentRef.current}
    />
  );
};

const App = () => {
  const componentRef = React.useRef(null);
  const data = { name: "张三", age: 20 };

  return (
    <PrintProvider>
      <PrintTemplate data={data} ref={componentRef} />
      <PrintButton componentRef={componentRef} />
    </PrintProvider>
  );
};

export default App;

这样，我们就完成了一个基于 antd 和 react-to-print 的前端打印模板组件。