Css 反应，打印机友好的可打印区域打印（Ctrl+；P）

在React应用程序（使用）中，我在一个视图中呈现了多个组件，但当用户想要打印页面时（例如，通过在浏览器上按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

从“React”导入React
从“语义ui反应”导入{Grid，Image}
常量GridExampleCelled=（）=>(
{/*另一个网格。行*/}
/*这应该是要打印的组件*/
这个网格中的所有内容都应该打印出来

)
导出默认GridExampleCelled

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

@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

类添加到要打印的区域。除非您有一些覆盖css，否则它应该按照您希望的方式工作

重要的一点是，如果您在全局范围内使用此CSS，它将隐藏所有没有要打印的

部分的内容，并且打印页面将为空白。因此，只有在需要时才将其注入样式表可能是明智的

让我知道这是否有帮助
 检查我认为两种方法之一：1。在
打印
案例中，将要打印的div拉伸为100%vw/vh，位置固定，白色背景等2。在弹出窗口中打开一个新页面，该页面仅用于打印（如果打印/显示页面彼此不一致，则很有用）。是否使用了类名
。无打印
或
。打印内容
？您的自定义样式（在
@media print{…}
中）仅影响具有这些类名的元素。您是否仅在寻找css解决方案？因为您还可以使用“onbeforeprint”和“onafterprint”事件通过JS操纵组件的可见性。此外，如何定义应用程序的外部样式也很重要。你的body或html标记是否使用了“overflow:hidden”@larrydahooster Good point是的，用JS捕获print命令也是一个不错的选择（我认为比CSS更好），但是阅读MDN中的文档并没有真正了解如何使用它，正如请注意，这在OP的代码中起作用的原因是应用于打印的定位。您可能会注意到，虽然这在代码和解释方面是一个非常好的答案，但它并没有直接回答OPs的问题，即为什么他的方法不起作用