打印时如何隐藏Material-UI凸起按钮

Question

我在网页上有一个按钮，它通过 javascripts window.print() 方法触发打印。不幸的是，在打印预览中，我仍然可以看到触发打印的按钮。有没有一种方法可以设置属性以在单击后隐藏此按钮或在我尝试打印时隐藏它？

我在 Material-UI 网站上找不到任何有用的东西，在 SO 上也找不到任何有用的东西。我在想我将不得不使用 CSS 来处理这个问题，但我很好奇是否有其他人对这个问题有运行，以及他们是否找到了另一种隐藏按钮的方法。

此外 - 如有必要，我可以隐藏我的整个工具栏组，但在该文档中也没有什么让我印象深刻的。

Answer 1

使用 css 中的 @media print 查询来设置 css 打印

@media print
{    
    button
    {
        display: none !important;
    }
}

这应该有效。看到这里我将打印查询添加到 material.ui 站点

的 main.css

请注意，当我去打印时，通常会在 "Simple examples" 部分显示的按钮不再存在了

Answer 2

将您要隐藏的内容放在具有 displayPrint="none" 属性的 Box 中应该可以解决问题。示例：

<Box component="span" displayPrint="none">
    your screen only content (this hides when printing)
</Box>

Material UI 文档 here.

How to hide Material-UI raised button when printing