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