Версия страницы для печати или печать отдельного блока на сайте

Версия страницы для печати или печать отдельного блока на сайте

7 февраля 2020 JavaScript

В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями.

Вызвать печать на странице

Печать документа на странице можно вызвать JavaScript функцией print().

Пример:

<a href="javascript:(print());" class="button-print">Печать</a>

Оформление страницы печати

Оформить вид страницы сайта при печати очень просто. Делается это с помощью медиа-запросов. Для этого в стили сайта добавляем @media print и внутри него пишем стили, которые будут вызваны при печати страницы. В примере ниже на распечатываемой странице сайта отключаем блок с рекламой:

@media print {
	.adv {display:none;}
}

Печать отдельного блока со страницы

Код HTML

<h1 id="print-title">Заголовок</h1>
<div id="print-img"><img src="img.jpg" /></div>
<div id="print-text">Текст</div>

<a href="#" onclick="javascript:callPrint();">Печать</a>

Код JavaScript

<script>
function callPrint() {
	var printCSS = '<link rel="stylesheet" href="css/print.css" type="text/css" />';
	var printTitle = document.getElementById('print-title').innerHTML;
	var printImg = document.getElementById('print-img').innerHTML;
	var printText = document.getElementById('print-text').innerHTML;
	var windowPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=0');
	windowPrint.document.write(printCSS);
	windowPrint.document.write(printTitle);
	windowPrint.document.write(printImg);
	windowPrint.document.write(printText);
	windowPrint.document.close();
	windowPrint.focus();
	windowPrint.print();
	windowPrint.close();
}
</script>

При нажатии кнопки «Печать» происходит вызов функции callPrint(). Если будете модернизировать код, то тут функции можно передавать к примеру ID блока, который нужно распечатать. В примере мы ничего не передаем и не используем библиотеку jQuery, хотя при более сложной вариации с ней будет проще.

Далее вызывается всплывающее окно, в которое добавляются наши блоки, после чего окно закрывается и открывается окно браузера для печати. Все это делается практически незаметно. И для пользователя это будет выглядеть так, как будто окно печати открылось сразу.

Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
3D фотоэффект изображения на JavaScript

В этом уроке вы узнаете, как создать иллюзию трехмерной фотографии из изображения, используя JavaScript и библиотеку Pixi.js webGL. Давайте сделаем это! Концепция Чтобы превратить обычную фотографию в 3D, нам нужно использовать карту глубины (или некоторые назвали бы карту смещения или Читать далее

Фильтрация и сортировка на JS с помощью библиотеки MixItUp

MixItUp - это высокопроизводительная библиотека без зависимостей, для анимированных манипуляций с DOM, которая дает вам возможность фильтровать, сортировать, добавлять и удалять элементы DOM с красивой анимацией. MixItUp прекрасно сочетается с вашими существующими HTML и CSS, что делает её отличным выбором Читать далее

Автоопределение города по IP на сайте

Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ - это определить Читать далее

Яндекс карта с управлением для сайта

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, Читать далее

Подключение jQuery

jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее

Модальное окно Bootstrap: использование и настройка

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

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Один комментарий на «Версия страницы для печати или печать отдельного блока на сайте»

  1. Дмитрий:

    Поставил кнопку печати на сайт. Все работает. Спасибо!)

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

*

code