reactjs 如何使用react-pdf/renderer有条件地分页

yzckvree  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(487)

我尝试在节标题不在第一页时有条件地添加分页符,即分页符应从第二页开始。如何将此条件添加到下面代码中“节标题”的View标记中,其中break属性应从第二页应用?
我正在使用react-pdf/renderer。请看下面的代码,其中的分页符从第1页开始。

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.rootContainer}>
          <Text style={styles.headerTitle}>
            Header Title
          </Text>
          <Image
            style={styles.image}
            src="someImage.jpg"
          />
        </View>

        {data.map((item, index) => (
          <View key={item}>
            <View break 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;
wwtsj6pe

wwtsj6pe1#

要有条件地在代码中添加分页符,可以使用View组件的pageBreak属性。此属性采用一个字符串值,该值指定应在何处插入分页符。
要在第二页后插入分页符,可以执行以下操作:
1.添加一个名为pageNumber的状态变量来跟踪当前的页码,初始化该变量为1。
1.在遍历数据数组的map函数中,添加一个条件以检查当前页码是否大于1。如果大于1,则将包含“Section Title”的View组件的pageBreak属性设置为“after”。
1.在呈现每个“节标题”视图组件后,将pageNumber变量递增1。
下面是代码经过这些更改后的外观:

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 [pageNumber, setPageNumber] = useState(1);

  const blob = await pdf((
    <Document>
      <Page style={styles.body}>
        <View style={styles.rootContainer}>
          <Text style={styles.headerTitle}>
            Header Title
          </Text>
          <Image
            style={styles.image}
            src="someImage.jpg"
          />
        </View>

        {data.map((item, index) => (
          <View key={item}>
            <View wrap={false} pageBreak={pageNumber > 1 ? 'after' : 'none'}>
              <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>
            {setPageNumber(pageNumber + 1)}
          </View>
        ))}

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

export default GeneratePDF;

相关问题