- -
Квитанция на печать

Квитанция на печать

Квитанция на печать
Задача: для формы оформления заказа сделать вывод на печать. Страница с формой заказа представлена ниже:
форма.png
Проблема: при выводе на печать видим что-то такое:
print-1.png
  1. На печать выводится много лишней информации: меню, строка поиска и тд.
  2. Разноцветные надписи надо привести к ч/б виду
  3. По умолчанию современные браузеры убирают фон страницы (на практике: игнорируют тэг background), однако проблема возникает в старых браузерах
Работаем:  Для решения задачи будем использовать очень модную штуку - адаптивную верстку. Суть в следующем: необходимо задать несколько css шаблонов для различных устройств. Возможно это двумя способами: подключение нескольких файлов и разбиение существующего файла на блоки под каждое устройство. Первый вариант нам не подходит из-за ммм… не гибкой системы подключения css файлов в битриксе. Используем второе решение. Открываем стиль шаблона и заносим весь шаблон со всеми блоками, классами и идентификаторами в конструкцию:
@media screen { }
Проще говоря, браузеры всех устройств с экранами будут брать стиль отсюда. Теперь ниже печатаем конструкцию для вывода на печать:
@media print { }
…и в нем пишем новый стиль для вывода на печать, который будет обрабатываться только принтерами. Я сделал невидимыми все ненужные блоки, изменил цвет текста на черный, прописал отсутствие фона блока, выводимого на печать и немного изменил форматирование текста, чтоб форма занимала всю страницу и не выходила за её пределы. Весь стиль у меня занял всего несколько строк:
@media print { 
   #pagetitle { 
      color: black; 
      margin-left: 5%; 
   } 
   #panel, #header-wrapper, #left-column, #print-btn, #breadcrumb-search, #footer{       display: none; 
   } 
   #print { 
      background: none; 
      margin-left: 5%; 
      margin-right: 5%; 
      width: 90%; 
   } 
}
Теперь вывод на печать выглядит так:
ptint-2.png

Обсудим проект? Напиши в Телеграм или Whatsapp

Комментарии

Telegram
+
tg
Мы в Telegram Читай первым уникальный контент
+
Подпишись на наш Телеграм канал