Недавно я работал над веб-приложением React, которое моя жена попросила меня сделать, чтобы она могла выбрать 5–7 приемов пищи из длинного списка блюд, которые нравятся нам обоим. После выбора сторон для каждого выбранного блюда конечная цель состоит в том, чтобы получить сводный список ингредиентов с флажками, чтобы отметить ингредиенты, которые у вас уже есть, и те, которые вам нужно будет получить в магазине. Когда я дошел до той части, где ингредиенты были на экране, она упомянула, что хотела бы, чтобы это было распечатано. За исключением того, что мы хотели, чтобы распечатывались только ингредиенты, а не все ненужные элементы панели навигации и заголовка вверху. Я понятия не имел, как это сделать, поэтому решил поделиться с вами всем простым решением, которое сработало для меня!

Чтобы продемонстрировать, я создал очень простое приложение React под названием PrintaBull. После вывода текста и изображений на экран я нацеливаюсь на определенные элементы на странице, которые хочу скрыть, позволяя распечатать оставшиеся видимые элементы. Если предварительный просмотр для печати выглядит странно, я решу все проблемы со стилем страницы для печати, не влияя на внешний вид веб-страницы.

Вот с чем я работаю:

Обратите внимание на строку 13, «кнопка» имеет функцию стрелки в «onClick», которая предлагает открыть предварительный просмотр печати.

Приложение выглядит так:

CSS, который я использовал до этого момента:

Предварительный просмотр печати после нажатия кнопки в настоящее время выглядит так:

Таким образом, мы заставили страницу открываться в окне предварительного просмотра браузера, и он даже вежливо изменил синий фон нашего заголовка на белый — скажем, мы хотим избавиться от изображений (не логотипа) в распечатке, не затрагивая изображения веб-сайта. , чтобы сэкономить чернила. Мы бы добавили этот CSS:

Это позволяет нам не только скрывать элементы от печати, но и изменять любые атрибуты CSS для любого элемента на странице. Как вы можете видеть на следующем изображении, мы избавились от изображений на нашей странице для печати, но форматирование по-прежнему отключено:

Попробуем уместить весь текст на одной странице:

Если вы сравните этот CSS с исходным CSS в строках 1–48 выше, все, что я сделал, это перезаписал исходный стиль для каждого желаемого элемента, чтобы отформатировать страницу для печати.

Это наш новый результат:

Как упоминалось ранее, это никак не влияет на CSS, кроме страницы предварительного просмотра/печати. И это в значительной степени люди! Это очень простое решение, которое я использовал для печати некоторых элементов, настройки стиля для других и скрытия остальных. Если вы дочитали до этого момента, спасибо за чтение, надеюсь, это было для вас полезно :) удачного кодирования.