javascript - 如何定义 react 页面的可打印区域？

Question

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

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

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

这是一个 React div 而不是 html div。

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

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

Answer 1

打印媒体查询

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

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