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

Question

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

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

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

并且渲染包含 元素。

然后，在模态中，我有：

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

  @media print {
    visibility: visible;
  }
`;

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

Answer 1

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

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

你试过没有

@media print

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

Answer 2

我在 vue.js 应用程序中遇到了同样的问题。 我认为问题在于 SPA 就像它的名字所说的那样只是一个单页应用程序。因此，只要有一个组件的内容无法包含在单个页面中，即使您不尝试打印该组件，打印功能也会包含这些页面。

我通过将其添加到我的全局 css 文件中来修复它。

@media print {

  html, body {
    height:100%; 
    overflow: hidden;
  }

}

这将强制打印功能仅选择一页。

Answer 3

我遇到了同样的问题，我发现页面上的某些元素（不仅仅是模式）在打印时不适合单个页面。您可以通过在任何基于 Chromium 的浏览器的“打印”对话框中启用“更多设置”->“选项”->“背景图形”来检查哪些元素超出了尺寸。就我而言，背景上的数据表装在两页上，而不是一页，这导致模式的内容被复制以进行打印。使用 @media print

 查询隐藏此表解决了问题。