[英]Hiding an element without using display:none or visibility:hidden
I am trying to render a PDF with react-pdf.我正在尝试使用 react-pdf 渲染 PDF。 To be clear, I mean this react-pdf library, not the other one.需要明确的是,我的意思是这个react-pdf 库,而不是另一个。 I want to include certain text in the PDF that will be used for indexing in the future, but I want for that text to be invisible (or nearly invisible).我想在 PDF 中包含将来用于索引的某些文本,但我希望该文本不可见(或几乎不可见)。 I will later detect this text with a Python script that reads in the text from the PDF.稍后我将使用从 PDF 读取文本的 Python 脚本检测此文本。
My question is how to achieve this by styling the hiddenheader.我的问题是如何通过设置隐藏标题的样式来实现这一点。
<Text style={styles.hiddenheader}>###HIDDEN HEADER###</Text>
const styles = StyleSheet.create({
hiddenheader: {
visibility: 'hidden',
color: 'red',
}
});
... Does not work. ... 不工作。 The text is still colored red, so I know that the style is being applied, but the text is not hidden, it is clear as day.文本仍然是红色的,所以我知道正在应用样式,但是文本没有隐藏,一清二楚。
const styles = StyleSheet.create({
hiddenheader: {
display: 'none',
color: 'red',
}
});
... Also does not work. ...也不起作用。 The text is still colored red, so I know that the style is being applied, but all instances except for one are deleted, and that one bizarrely appears at the very top of the first page, clear as day.文本仍然是红色的,所以我知道样式正在被应用,但是除了一个之外的所有实例都被删除了,并且一个奇怪地出现在第一页的最顶部,一清二楚。
I don't need a solution that completely removes the element from the rendered page (and that might prevent the element from ever appearing).我不需要从渲染页面中完全删除元素的解决方案(这可能会阻止元素出现)。 I just need one that makes the text invisible to the naked eye.我只需要一个使文本肉眼看不见的。
Since we want the text to remain in the PDF for indexing, setting opacity: 0
will ensure the text remains in the PDF without actually removing it from the document.由于我们希望文本保留在 PDF 中以进行索引,因此设置opacity: 0
将确保文本保留在 PDF 中而不会实际从文档中删除。
hiddenheader: {
opacity: 0,
fontSize: 0.1
}
you can use your external custom css for hide any tag in react-pdf您可以使用外部自定义 css 隐藏 react-pdf 中的任何标签
<Text style={{ marginBottom: 5 }} className="hidden">
Issued By:Electronics Sector Council Of India
</Text>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.