const Template1 = ({ data }) => {
const styles = StyleSheet.create({
page: {
position: "relative",
},
watermarkContainer: {
position: "absolute",
bottom: 30,
right: 30,
zIndex: 0,
opacity: 0.5,
},
watermark: {
width: 120,
},
});
return (
<Document>
<Page size="A4" style={styles.page}>
<Text>{data}</Text>
<View style={styles.watermarkContainer}>
<Image src={Watermark} />
</View>
</Page>
</Document>
);
};
If the content in the page tag fills multiple pages, the watermark only shows on the last page. How can I add a watermark on every page?
You only need to add 'fixed' to the watermarkContainer View,
<View fixed style={styles.watermarkContainer}>
<Image src={Watermark} />
</View>
Fixed element are visible on all pages.
For example seen [here in lower right corner.]1