Итак, рассмотрим практический случай.

Вы разрабатываете одностраничное приложение с использованием React (и, возможно, Redux). Вам необходимо распечатать некоторые документы. Сделать это легко. Вы отображаете страницу, а затем позволяете пользователю нажимать CTRL и P. Вуаля. Страница напечатана.

В чем проблема? Что ж, предположим, вы хотите (должны) напечатать 2 документа в разной ориентации. Один из них будет портретным, а другой - альбомным.

Наивный подход

Вернемся к нашему примеру, используя Chrome 56.0, перейдите к первому документу с документом, нажмите CTRL + P , а затем выберите режим Книжная:

Оно работает. Теперь перейдите к второму документу, нажмите CTRL + P, выберите на этот раз Альбомную и затем напечатайте.

Теперь вернемся к первому документу и наберем CTRL + P, где Chrome выбрал для нас режим Пейзаж.

Существует проблема. Если мы предполагаем, что пользователь будет каждый раз менять настройки, мы ошибаемся. В конечном итоге мы создадим плохой пользовательский дизайн, который может даже создать проблемы: например, печать неправильного размера.

Как это исправить?

Я столкнулся с крошечной проблемой решения этого сценария. Почему? Все просто: у вас нет контроля над ориентацией с помощью JavaScript.

Мы знаем, что можем использовать size в CSS для установки ориентации страницы.

<style type="text/css">
  @media print{
    @page {
      size: landscape;
    }
  }
</style>

Но подожди немного. Это означает, что ориентация будет такой же, пока мы не перейдем на другую страницу. Мы решили оставаться на той же странице, а не переходить на новую. Итак, как это исправить?

Хорошо, ориентация страницы контролируется этим кодом. Что, если бы мы инкапсулировали этот код в 2 компонента: LandscapeOrientation и PortraitOrientation, а затем вставили один из них, когда нам нужно.

LandscapeOrientation.jsx

export const LandscapeOrientation = () => (
  <style type="text/css">
    {"@media print{@page {size: landscape}}"}
  </style>
);

PortraitOrientation.jsx

export const PortraitOrientation = () => (
  <style type="text/css">
    {"@media print{@page {size: portrait}}"}
  </style>
);

Работает? Да, компоненты перезаписывают параметр size, задав наш любимый.

Еще один замечательный аспект заключается в том, что Chrome теперь скрывает параметр ориентации. Пользователь больше не может выбрать неправильный размер.

Примечание. Я знаю, что повторяю код, но он не сработал, создав один Orientation component, а затем расширив его с помощью портретной и альбомной ориентации.