React，打印机友好的可打印区域以进行打印（Ctrl + P）

Question

在我的React应用程序中（使用semanticUI），我有几个组件呈现在视图中，但当用户想要打印页面时（例如通过在浏览器上按Ctrl+P），我只想让其中一个部分可打印。

例如，如果这是用户看到的截图，则在触发浏览器打印时，绿色区域应该显示在打印概述中。

到目前为止，在SCSS文件中，我有：

@media print{    
  .no-print, .no-print *{ display: none !important; }
}

将不需要的组件添加进去，可以使它们消失，但在打印区域会留下空白。绿色区域没有填满页面，如果这个绿色部分是可滚动的并且应该适用于几页，我只能看到一页（一个A4纸张包含我在屏幕上看到的内容）。

拥有

@media print {
  .print-content {
    display: block;
    width: 100%;
    height: 100%;
    page-break-after: always;
    overflow: visible;
  }
}

尚未生效，但获得相同的可打印视图。

这是此屏幕截图的代码。

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const GridExampleCelled = () => (
  <Grid celled>
    {/*another Grid.Row*/}

    <Grid.Row>
      <Grid.Column width={3}>
        <Image src='/images/wireframe/image.png' />
      </Grid.Column>
      <Grid.Column width={10}> /* This should be the component to print */
        <p> EveryThing Wrapped in this Grid should be printed </p>
      </Grid.Column>
      <Grid.Column width={3}> 
        <Image src='/images/wireframe/image.png' />
      </Grid.Column>
    </Grid.Row>
  </Grid>
)

export default GridExampleCelled

- Amir-Mousavi

---

我认为有两种方法：1. 在“打印”情况下，将要打印的div拉伸到100% vw/vh，使用固定位置、白色背景等。2. 在弹出窗口中打开一个新页面，专门用于打印（如果打印/显示页面相互分离，则非常有用）。 - Tommos

你在任何地方使用了 .no-print 或 .print-content 这些类名吗？你自定义的样式（在 @media print { ... } 中）只会影响具有这些类名的元素。 - ArneHugo

你只是在寻找 CSS 解决方案吗？因为你也可以利用“onbeforeprint”和“onafterprint”事件通过 JS 来操作组件的可见性。此外，定义应用程序的外部样式非常重要。你的 body 或 html 标签是否使用了“overflow: hidden”？ - larrydahooster

@larrydahooster 不错的观点，使用JS捕获打印命令也是一个不错的选择（我认为比仅使用CSS更好），但是在MDN中阅读文档时并没有真正理解如何使用它。 - Amir-Mousavi

@Amir-Mousavi 抱歉，我是指评论而不是答案。由于我不知道整个页面的设置情况，所以恐怕无法给出答案。但是尝试重置所有外部容器的“overflow: hidden”和固定高度。Iframe 不应该是问题。这也可以设置为自动高度，以完全包裹其内容。 - larrydahooster

Answer 1

不要把这个方案看作是覆盖所有用例的终极解决方案。但您可以尝试这个片段的想法，看看它是否足以解决您的问题。我在最近的项目中有一个类似的任务，这种方法起到了需要的作用。

@media print {
  @page {
    size: landscape;
  }
  body * {
    visibility: hidden;
  }
  .section-to-print, .section-to-print * {
    visibility: visible;
  }
  .section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

它将隐藏页面上的所有内容。然后，将 .section-to-print 类添加到要打印的区域。除非您对其进行了某些覆盖 css，否则它应该按照您希望的方式工作。

需要注意的重要点是，如果您在全局范围内拥有此 CSS，则会隐藏所有没有 .section-to-print 的内容，打印页面将为空白。因此，仅在需要时将其注入样式表中可能是明智的选择。

如果这有所帮助，请告诉我。

- Sam Uherek

---

只是注意一下，这个代码能够正常工作的原因是为了打印而应用的定位。你可能想指出来的是，虽然这个答案在代码和解释方面非常好，但它并没有直接回答 OP 的问题，即他的方法为什么不起作用。 - Barkermn01