如何定义反应页面的可打印区域？

Question

我在使用 react-admin 制作的 Web 应用程序的内容区域中呈现了一个复杂的表单。

表单应该是可打印的，没有导航元素、页眉等。只有内容区域。要打印的内容的外部容器如下所示：

<div className="printcontainer" id="print_content">
   <LotsOfFancyReactStuff />
</div>

这是一个反应 div 不是 html div。

有没有办法用 CSS 或其他方式定义页面的可打印区域？

现在在 chrome 中查看打印预览时，只会打印导航。内容区域根本不会打印。由于我在页面上有一个打印按钮，因此用于打印的 Javascript 函数或反应组件也可以。
不幸的是，由于现代浏览器的安全限制，我不能只打开一个弹出窗口并将容器div 的内容写入其中。

Answer 1

打印媒体查询

将印刷媒体查询添加到您的样式中。这使您可以为打印表指定哪些内容可以打印以及其他特定样式。请不要浏览器支持。

@media print { 
 /* All your print styles go here */
 *:not(.print_content) { display: none !important; } 
}

Answer 2

这对我有用：

@media print {
  :not(#print_content > *) {
    display: none !important;
  }

  /* because the first thing does not hide everything */
  .MuiDrawer-root,
  .MuiToolbar-root {
    display: none !important;
  }
}