Javascript печать на принтер

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

Так выглядит код кнопки для печати всей страницы:

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

1. Подключаем библиотеку jQuery (вставить следующий код между и ). Если ваш сайт на uCoz, этого не требуется, библиотека уже подключена.

Сегодня предлагаю рассмотреть простую и более сложную функцию, которая позволит пользователям распечатать страничку вашего сайта или ее определенную часть.

Если первый вариант реализовать очень просто, то со вторым придется повозиться. Итак, чтобы распечатать любую страницу вашего сайта мы будем использовать Java Script функцию print(). Пример кода:

Если вы разместите этот код на своем сайте, то при нажатии на ссылку откроется окно печати страницы. Запуск действия происходит за счет: onClick="window.print()". Это событие можно установить не только на ссылку, но и любой другой тег, button или div.

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

Если рассмотреть код кратко, то при клике на элемент с классом myprint будет выводиться на печать только область с классом to_print. Полный пример и принцип действия вы можете скачать по ссылкам выше. В них вы найдете рабочий код и html элементы за счет которых и осуществляется печать всего документа или только его определенной части.

Данный скрипт легко адаптировать под ваши цели, например, чтобы распечатать готовую квитанцию на оплату или определенную картинку, например, купон с акцией или скидкой.

При создании очередного сайта столкнулся с задачей печати HTML-страницы. На странице была информация о проекте (коттеджи) и ее нужно было по клику распечатать. Для решения идеально подходит Javascript. Итак, создаем такую структуру:

Обязательно задаем идентификатор. Содержимое может быть любым. Далее напишем небольшую функцию для печати веб-страницы:

И немного поясню. Эта функция откроет новое popup-окно, вызовет функцию печати. После печати автоматически закроет окно. В новое окно передается содержимое блока print-content. Также вызываем стили CSS, чтобы отформатировать содержимое. И, конечно, надо вызывать функцию. Делаем через Javascript функцию onClick:

Ну вот и все. Просто и с душой.

Если браузер не видит CSS стили

Если браузер по той или иной причине не хочет видить CSS, то можно упростить код, удалив пару строк:


[an error occurred while processing the directive]
Карта сайта