javascriptreactjsfrontendreact-pdf

How to add watermark to every pages in react-pdf


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?


Solution

  • 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 enter image description here