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

Answer 1

不要将此视为涵盖所有用例的终极解决方案。但是你可以试试这个 sn-p 的想法，看看它是否足够解决你的问题。我最近的项目中有一个类似的任务，这种方法可以根据需要进行。

@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 的内容，并且打印页面将是空白的。因此，仅在需要时将其注入样式表可能是明智之举。

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