javascript - How to add watermark to every pages in react-pdf - Stack Overflow

admin管理员组

文章数量:1244246

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?

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?

• javascript
• reactjs
• frontend
• react-pdf

Share Improve this question Follow edited Feb 17 at 12:29 Dhamodharan B asked Feb 17 at 12:23 Dhamodharan BDhamodharan B 1111 bronze badge New contributor Dhamodharan B is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct. 2

• 1 This question should be helpful even if it doesn't use react-pdf stackoverflow/questions/50366481/… – evolutionxbox Commented Feb 17 at 12:44
• Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Bot Commented Feb 18 at 2:25

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can do it by leveraging canvasRef and drawing over the PDF yourself. This is how you can do it: https://codesandbox.io/p/sandbox/react-pdf-watermark-5wylx?file=%2Findex.html

本文标签： javascriptHow to add watermark to every pages in reactpdfStack Overflow