不使用 display:none 或visibility:hidden 隐藏元素

Question

我正在尝试使用react-pdf 渲染PDF。需要明确的是，我指的是这个React-pdf 库，而不是另一个库。我想在 PDF 中包含将来用于索引的某些文本，但我希望该文本不可见（或几乎不可见）。稍后我将使用从 PDF 中读取文本的 Python 脚本来检测此文本。

我的问题是如何通过隐藏标题的样式来实现这一点。

<Text style={styles.hiddenheader}>###HIDDEN HEADER###</Text>

const styles = StyleSheet.create({
  hiddenheader: {
    visibility: 'hidden',
    color: 'red',
  }
});

... 不起作用。文字仍然是红色的，所以我知道正在应用样式，但文字并没有隐藏，一目了然。

const styles = StyleSheet.create({
  hiddenheader: {
    display: 'none',
    color: 'red',
  }
});

...也不起作用。文本仍然是红色的，所以我知道正在应用该样式，但是除了一个之外的所有实例都被删除，并且那个实例奇怪地出现在第一页的最顶部，清晰如日。

我不需要从渲染页面中完全删除该元素的解决方案（这可能会阻止该元素出现）。我只需要一个能让肉眼看不到文字的东西。

Answer 1

由于我们希望文本保留在 PDF 中以进行索引，因此设置opacity: 0将确保文本保留在 PDF 中，而不实际将其从文档中删除。

  hiddenheader: {
    opacity: 0,
    fontSize: 0.1
  }