打印时如何隐藏按钮菜单？

Question

我有一个按钮可以打印当前正在查看的页面。我想在打印时隐藏 div 'mainMenuDiv' 中包含的按钮菜单。

以下的

None 似乎有效并产生未捕获的 null 样式错误。

document.getElementById('mainMenuDiv').style.display = 'none';
document.getElementById('mainMenuDiv').style.visibility = 'hidden';

这是我的打印屏幕代码

    <button className="printBtn" onClick={this.printPage}>PRINT SCREEN</button>

printPage() {
        window.print();
    }

不确定如何在不使用上述 document.getElementById 调用的情况下隐藏 mainMenuDiv

Answer 1

您可以使用名为 print 的 @media 类型并通过 CSS 控制它：

@media print {
  #mainMenuDiv {
    display: none;
    visibility: hidden;
  }
}