javascript - 如何在打印时隐藏 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中添加了打印查询

注意打印时通常会在“简单示例”部分显示的按钮不再存在