/ Сайтостроение / Адаптивность / Версия сайта для печати

Версия сайта для печати

Для того чтобы при отправке на принтер печаталась определенная (основная) часть сайта, с измененным дизайном, нужно создать специальный css — print.

Тестировать вид шаблона для печати удобно в браузере Chrome, при нажатии функции Печать.

Медиазапрос print

Назначать стиль можно медиазапросом

@media print { 
  
}

Данный метод добавления стиля печати не работает

Файл стиля print.css

Добавлением стиля:

в файл funсtions.php или отдельным подключением:
wp_enqueue_style( 'print', get_template_directory_uri() . '/print.css' , array( ), '1.0' , 'print' );
<link media="print, handheld" rel="stylesheet" href="print.css">

И прописать элементам, которые не надо печать атрибут display: none; и другие необходимые атрибуты.

Либо добавить элементам, которые не должны печататся класс no-print

.no-print {display: none;}

Если в одном из контейнеров выше стоит align=»center» то в блоке вывода контента надо ставить align=»left»

Кнопка печати

Печать файла

Если нужно распечатать отдельный документ, например схему проезда или реквизиты, чтобы не подготавливать всю страницу можно сделать его отдельным файлом. Создаем .pdf загружаем его на сайт и на кнопку ПЕЧАТЬ ставим на него ссылку с target=»_blank». При нажатии файл открывается в отдельной вкладке готовый к печати.

Кнопка печати изображения

Помещяем на кнопку путь к нужному изображению для печати

<button onclick="printImg('http://i.stack.imgur.com/hCYTd.jpg')">Print</button>

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

function printImg(url) {
	var win = window.open('');
	win.document.write('<img src="' + url + '" onload="window.print();window.close()" />');
	win.focus();
}

Не знаю насколько это верно. Когда загружал Картинки А4 с разрешением 300 точек, они при автоматической печати не умещались на печатную страницу. Когда сделал разрешение 120 точек. Изображение стало умещаться. Возможно просто повезло.

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Версия сайта для печати
Поочередная загрузка элементов
Рекомендации для васПоочередная загрузка элементовOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.