Как определить область печати страницы реакции?

Question

Я отображаю сложную форму в области содержимого моего веб-приложения, созданного с помощьюact-admin.

Форма должна быть напечатана без элементов навигации, заголовка страницы и т. Д. c. просто область контента. Внешний контейнер содержимого для печати выглядит следующим образом:

<div className="printcontainer" id="print_content">
   <LotsOfFancyReactStuff />
</div>

Это реакция div, а не html div.

Есть ли способ определить область печати с CSS или как-то еще?

При просмотре предварительного просмотра в chrome теперь будет печататься только навигация. Область содержимого не будет напечатана вообще. Поскольку у меня есть кнопка печати на странице, функция Javascript или компонент реакции для печати также подойдет. К сожалению, я не могу просто открыть всплывающее окно и записать в него содержимое контейнера div из-за современных ограничений безопасности браузера.

Answer 1

Запрос печатного носителя

Добавьте запрос печатного носителя к вашим стилям. Это позволяет вам указать, какие вещи должны быть напечатаны, и другие стили c для вашего печатного листа. Пожалуйста, не поддержка браузера.

@media print { 
 /* All your print styles go here */
 *:not(.print_content) { display: none !important; } 
}

Answer 2

Это работает для меня:

@media print {
  :not(#print_content > *) {
    display: none !important;
  }

  /* because the first thing does not hide everything */
  .MuiDrawer-root,
  .MuiToolbar-root {
    display: none !important;
  }
}