Итак, рассмотрим практический случай.
Вы разрабатываете одностраничное приложение с использованием 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, а затем расширив его с помощью портретной и альбомной ориентации.