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

Question

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

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

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

这是反应 div 而不是 html div。

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

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

Answer 1

打印媒体查询

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

@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;
  }
}

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

How to define the printable area of a react page?

javascript

css

reactjs

react-admin

打印媒体查询