为什么 window.print 给出重复的页面？

Question

我正在尝试在 React 组件中打印模式对话框。当模态下的组件占用超过一页时，每页都会重复打印模态。

由于我想要打印的 div 覆盖在其他 div 上，因此我使用样式组件库将 @media 打印属性设置为仅显示打印目标。在页面中，我有以下内容：

const NoPrintBody = createGlobalStyle`
  @media print {
    html, body {
      visibility: hidden;
    }
  }
`;

并且渲染包含 <NoPrintBody /> 元素。

然后，在模式中，我有：

const ReportContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;

  @media print {
    visibility: visible;
  }
`;

这里模态被 <ReportContainer> 元素包围。我尝试将底层内容的高度设置为 0px，但这没有任何影响。

Answer 1

您的全局样式是否正确更新？您应该能够在页面上的某个位置找到该 css。

我不认为 N​​oPrintBody 会起作用，因为它的目标是 html 标签 - 即使你的模态也应该是它的子元素。

你试过没有吗@media print？如果您可以让它在浏览器中看起来像您想要的那样，您应该能够将其添加回来以使其按照您想要的方式打印