要在 React 中生成
PDF 并且自动
分页，可以使用第三方库 React-
PDF。该库提供了一个 `<Document>` 组件和 `<Page>` 组件，其中 `<Page>` 组件可以自动
分页。
要生成
表格，可以使用 `<
Table>` 组件。以下是一个示例代码：
```
jsx
import React from 'react';
import { Document, Page, Text, View, StyleSheet, Font,
Table,
TableRow,
TableCell } from '@react-
pdf/renderer';
// 定义字体
Font.register({
family: 'Noto Sans',
src: 'https://fonts.gstatic.com/s/notosans/v12/o-0IIpQlx3QUlC5A4PNb4j5Ba_2iuOw.ttf',
});
const styles = StyleSheet.create({
page: {
padding: 20,
fontFamily: 'Noto Sans',
},
section: {
marginBottom: 10,
},
table: {
width: '100%',
borderStyle: 'solid',
borderWidth: 1,
borderColor: '#000',
borderLeftWidth: 0,
borderTopWidth: 0,
},
tableRow: {
flexDirection: 'row',
},
tableCell: {
width: '33.33%',
borderStyle: 'solid',
borderWidth: 1,
borderColor: '#000',
borderRightWidth: 0,
borderBottomWidth: 0,
},
});
const MyDocument = () => {
return (
<Document>
<Page style={styles.page}>
<View style={styles.section}>
<Text>这是第一页</Text>
</View>
<View style={styles.section}>
<
Table style={styles.
table}>
<
TableRow style={styles.
tableRow}>
<
TableCell style={styles.
tableCell}>
<Text>列1</Text>
</
TableCell>
<
TableCell style={styles.
tableCell}>
<Text>列2</Text>
</
TableCell>
<
TableCell style={styles.
tableCell}>
<Text>列3</Text>
</
TableCell>
</
TableRow>
{/* 生成多行 */}
{Array.from(Array(20).keys()).map((index) => (
<
TableRow style={styles.
tableRow} key={index}>
<
TableCell style={styles.
tableCell}>
<Text>{index + 1}</Text>
</
TableCell>
<
TableCell style={styles.
tableCell}>
<Text>内容</Text>
</
TableCell>
<
TableCell style={styles.
tableCell}>
<Text>内容</Text>
</
TableCell>
</
TableRow>
))}
</
Table>
</View>
{/* 自动
分页 */}
<View style={styles.section}>
<Text>这是第二页</Text>
</View>
</Page>
</Document>
);
};
export default MyDocument;
```
在上面的代码中，我们定义了一个 `<MyDocument>` 组件，其中包含了一个
表格。
表格使用了 `<
Table>`、`<
TableRow>`、`<
TableCell>` 组件，每个单元格都有一个样式 `styles.
tableCell`。我们使用了 `Array.from(Array(20).keys())` 来生成
表格的多行，同时也演示了自动
分页的效果。
最后，我们将 `<MyDocument>` 组件导出，然后在需要使用的地方引入即可。例如可以使用以下代码将
PDF 文件保存到本地：
```
jsx
import React
PDF from '@react-
pdf/renderer';
import MyDocument from './MyDocument';
const save
PDF = async () => {
const
pdfBlob = await React
PDF.renderToBlob(<MyDocument />);
saveAs(
pdfBlob, 'my-document.
pdf');
};
```
在上面的代码中，我们使用了 `React
PDF.renderToBlob()` 方法将 `<MyDocument>` 组件渲染成
PDF 文件，并将其保存到本地。需要注意的是，我们使用了第三方库 FileSaver.
js 来实现下载操作。
3876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
