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

Question

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

我的问题是如何通过设置 hiddenheader 的样式来实现这一点。

<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
  }

Answer 2

您可以使用外部自定义 css 隐藏 react-pdf

中的任何标签

<Text style={{ marginBottom: 5 }} className="hidden">
    Issued By:Electronics Sector Council Of India
</Text>

Hiding an element without using display:none or visibility:hidden