Реагируйте на область печати для печати (Ctrl + P)

Question

В моем приложении React (используя semnaticUI ) у меня есть несколько компонентов, отображаемых в виде, но когда пользователи хотят распечатать страницу (например, нажав Ctrl + P в браузере), я хочу только одиннапример, деталь для печати

, если это снимок экрана с тем, что видит пользователь, зеленая область должна отображаться в обзоре печати при запуске печати из браузера.

Пока у меня есть в файле scss

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

, при добавлении которого к нежелательным компонентам они исчезают, но в области печати остается пустое пространство, а зеленая часть также не заполняет страницу.если эта зеленая часть прокручивается и должна умещаться на нескольких страницах, я просто вижу одну страницу (одна бумага формата А4, содержащая то, что я вижу на экране)

с

@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 и страница печати будет пустой.Таким образом, было бы разумно добавить его в таблицу стилей только при необходимости.

Дайте мне знать, если это поможет.