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

Question

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

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

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

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

是否可以使用CSS或其他方式定义页面的可打印区域？

[现在以chrome浏览打印预览时，将仅打印导航。内容区域将完全不打印。因为我在页面上有一个打印按钮，所以用于打印的Javascript函数或react组件也可以。不幸的是，由于现代浏览器的安全性限制，我不能只打开一个弹出窗口并向其写入容器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;
  }
}