为啥 window.print 给出重复页面？

Posted 2023-03-06

【中文标题】为啥 window.print 给出重复页面？

【英文标题】：Why is window.print giving duplicate pages?为什么 window.print 给出重复页面？

【发布时间】：2019-12-19 04:41:11

【问题描述】：

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

由于我要打印的 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，但这没有任何影响。

【问题讨论】：

你发现了吗？我有同样的问题。我的打印媒体查询将目标 div 的位置设置为固定，宽度和高度设置为 100vw/h，以覆盖整个页面。但是现在当 window.print() 被调用时，我在打印视图中得到两页。

我们最终没有使用模式（通过导航到新路线（使用 React）。

啊..我也想通了。我找不到我的评论，所以我可以编辑它。在打印媒体查询中使用 display: fixed 时，我得到了重复。

【参考方案1】：

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

我认为 NoPrintBody 不会起作用，因为它针对的是 html 标记 - 甚至您的模态也应该是它的子节点。

你试过没有@media print 吗？如果你可以让它在浏览器中显示你想要的样子，你应该能够将它添加回来让它打印你想要的样子

【讨论】：

我确信全局样式正在正确更新，因为没有它，其他内容（例如基础页面和菜单）会显示在打印件上。