如何在react-pdf的所有页面添加水印

嘿，我来帮你解决这个问题！你遇到的情况其实挺常见的——现在你把水印直接放在单个<Page>标签内部，当内容太长触发自动分页时，react-pdf只会把流式的内容（比如你的<Text>{data}</Text>）复制到新生成的页面里，而你那个用absolute定位的水印容器只会跟着最后一页走，自然就只有最后一页能看到水印了。

给你两种简单好用的解决方案，你可以根据需求选：

方案一：用fixed定位快速实现全局水印（最简便） #

react-pdf里的fixed定位和网页端的逻辑类似，它会把元素识别为「每页都要固定显示的内容」，只要把水印容器的定位改成fixed，就能自动在每一页的相同位置显示水印了，代码改动极小：

const Template1 = ({ data }) => {

  const styles = StyleSheet.create({
    page: {
      position: "relative",
    },
    watermarkContainer: {
      position: "fixed", // 把absolute改成fixed即可
      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} style={styles.watermark} />
        </View>
      </Page>
    </Document>
  );
};

改完之后，水印就会乖乖出现在每一页的右下角啦。

方案二：自定义页面渲染（灵活性更高） #

如果你需要更精细的控制——比如想给不同页面的水印做差异化调整，或者要在水印里加页码信息，就可以用Document的onRenderPage回调接管每一页的渲染逻辑，确保水印被强制加到每一页里：

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,
    },
  });

  // 自定义每一页的渲染逻辑
  const renderPage = ({ pageNumber, totalPages, children }) => (
    <Page size="A4" style={styles.page}>
      {children} {/* 这里渲染原有的页面内容 */}
      <View style={styles.watermarkContainer}>
        <Image src={Watermark} style={styles.watermark} />
        {/* 还能顺便加个页码水印，比如：<Text>第{pageNumber}/{totalPages}页</Text> */}
      </View>
    </Page>
  );

  return (
    <Document onRenderPage={renderPage}>
      <Text>{data}</Text>
    </Document>
  );
};

这个方法还能拿到pageNumber和totalPages参数，要是你需要给水印加页码标识，用这个方案就特别方便。

备注：内容来源于stack exchange，提问作者Dhamodharan B