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

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

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

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

这是react

div

而不是html

div

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

现在在chrome中查看打印预览时，只打印导航。内容区域将完全不打印。因为我在页面上有一个打印按钮，所以使用Javascript函数或react组件进行打印也可以
不幸的是，由于现代浏览器的安全限制，我无法打开弹出窗口并将容器

div

的内容写入其中

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

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

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

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

这对我很有用：

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

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

这对我很有用：

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

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

---

我是否可以定义为“不打印任何内容，排除#打印#内容”，因为所有其他元素都没有ID，并且每个元素都使用多个材质ui类？您可以使用：not选择器。类似*：not（…）的内容应该可以工作。我会将该部分添加到回答中。我可以定义为“不打印任何内容，排除打印内容”，因为所有其他元素都没有ID，并且每个元素都使用多个材质ui类？您可以使用：not选择器。类似*：not（…）的东西应该有用我会在答案中添加这一部分