如何在react-pdf/renderer中实现从第二页开始的条件分页

要实现只有从第二个Section开始才添加分页符，你只需要在遍历data时，根据当前项的索引来条件性设置break属性：第一个Section（索引为0）不启用break，从第二个Section（索引≥1）开始启用break。

修改后的核心代码片段 #

{data.map((item, index) => (
  <View key={item}>
    {/* 仅当不是第一个Section时添加分页符 */}
    <View break={index > 0} wrap={false}>
      <Text style={styles.sectionTitle}>Section Title</Text>
    </View>
    {/* 其余内容保持不变 */}
  </View>
))}

完整修改后的代码 #

import { saveAs } from 'file-saver';
import { pdf, Document, Page, Text, View, Image } from '@react-pdf/renderer';
import styles from './styles';

const GeneratePDF = async (fileName, data) => {
  const blob = await pdf((
    <Document>
      <Page style={styles.body}>
        <View style={styles.root}>
          <Text style={styles.headerTitle}>
            Header Title
          </Text>
          <Image
            style={styles.image}
            src="someImage.jpg"
          />
        </View>

        {data.map((item, index) => (
          <View key={item}>
            {/* 条件分页：仅从第二个Section开始添加分页符 */}
            <View break={index > 0} wrap={false}>
              <Text style={styles.sectionTitle}>Section Title</Text>
            </View>
            <View wrap={false}>
              <Text style={styles.subtitle}>About</Text>
              <Text style={styles.aboutDesc}>{item.description}</Text>
            </View>
            <View>
              <Text>{'\n'}</Text>
              <Text style={styles.subtitle}>Things wanted</Text>
              {item.things.map((thing, idx) => (
                <Text key={thing} style={styles.list}>
                  -
                  {thing.description}
                </Text>
              ))}
            </View>
          </View>
        ))}

        <Text
          style={styles.pageNumber}
          render={({ pageNumber, totalPages }) => (
            `${pageNumber} / ${totalPages}`
          )}
          fixed
        />
      </Page>
    </Document>
  )).toBlob();
  
  saveAs(blob, fileName);
};

export default GeneratePDF;

原理说明 #

• index > 0的判断确保第一个Section（对应第一页的内容）不会触发分页，避免在页眉后直接分页。
• 从第二个Section开始，break属性生效，会在当前View前插入分页符，让每个后续的Section Title都从新的一页开始显示。

内容的提问来源于stack exchange，提问作者qqq