反应过来，打印机友好的打印区域内打印（按Ctrl + P）

Question

在我的申请作出反应（使用semnaticUI），我有一个观点呈现几部分组成，但是当用户想要打印的页面（例如，通过按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

不要把这个作为一个覆盖所有用例的最终解决方案。不过你可以试试这个片断的想法，看它是否足以解决您的问题。我在最近的一个项目也有类似的任务，并根据需要这种方法奏效。

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

让我知道，如果这有助于。