react生成pdf

在React中生成PDF可以使用一些第三方库来实现。一个常用的库是`react-pdf`，它提供了一个简单的API来创建和渲染PDF文档。

首先，你需要安装 `react-pdf` 库。你可以使用npm或者yarn命令来安装：

npm install @react-pdf/renderer

或者

yarn add @react-pdf/renderer

安装完成后，你可以在React组件中使用`react-pdf`来生成PDF。下面是一个简单的示例：

import React from 'react';
import { PDFViewer, Document, Page, Text } from '@react-pdf/renderer';

const MyDocument = () => (
  <Document>
    <Page>
      <Text>Hello World</Text>
    </Page>
  </Document>
);

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

export default App;

在上面的示例中，我们定义了一个名为`MyDocument`的组件，它包含一个页面和一段文本。然后，我们将`MyDocument`组件包裹在`PDFViewer`组件中，这样就可以在浏览器中显示PDF。

当你需要导出PDF文件时，你可以使用`react-pdf`提供的`PDFDownloadLink`组件。下面是一个示例：

import { PDFDownloadLink } from '@react-pdf/renderer';

const App = () => (
  <div>
    <PDFDownloadLink document={<MyDocument />} fileName="document.pdf">
      {({ blob, url, loading, error }) =>
        loading ? '正在生成PDF...' : '下载PDF'
      }
    </PDFDownloadLink>
  </div>
);

export default App;

在上面的示例中，我们使用`PDFDownloadLink`组件来提供一个下载链接。你可以通过`document`属性传递一个PDF文档组件，通过`fileName`属性设置下载文件的名称。

这只是一个简单的示例，你可以根据自己的需求来定制生成的PDF内容和样式。你可以在`react-pdf`的文档中找到更多的API和使用示例。