Главная » Вебмастеру » Кнопки и ссылки на JavaScript для распечатывания веб-страниц

Кнопки и ссылки на JavaScript для распечатывания веб-страниц

2014-11-20 / Вр:00:10 / просмотров: 20864

Согласитесь, что на таких сайтах, где можно распечатать копию договора, квитанции, полезную информацию, очень удобно на странице разместить кнопку или ссылку для печати документа. Конечно, можно было бы обойтись и без кнопки, если бы все пользователи знали, что при нажатии горячих клавиш «CTRL+P» можно распечатать веб-страницу. Или же перейти в меню браузеров «Файл» => «Печать».

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

Как на сайте установить ссылку для распечатывания веб-страницы?

Выберите любой из указанных скриптов и установите в любом необходимом месте между тегами <body>…< /body >. На странице вы увидите ссылку «Распечатать» или «Печать документа»:

1 скрипт

<a href="#" onClick="window.print()"> Распечатать </a>

2 скрипт

<a href="javascript:(print());"> Печать документа</a>

3 скрипт

<a href="javascript:window.print()"> Распечатать</a>

Результат:

Как на сайте установить ссылку для распечатывания веб-страницы?

Как на сайте установить кнопку для распечатывания веб-страницы?

Выберите любой из указанных скриптов и установите в любом необходимом месте между тегами <body>…< /body >. На странице вы увидите кнопку с текстом «Печать», «Распечатать» или «Печать документа»:

1 скрипт

<input ENGINE="button" value="Печать документа" onClick="javascript:print(document);"/>

2 скрипт

<input type="button" value="Печать" onClick="javascript:print(document);">

3 скрипт

<button onclick='print();'>Распечатать</button>

Результат:

Как на сайте установить кнопку для распечатывания веб-страницы?

Как на сайте установить графическую кнопку для распечатывания веб-страницы?

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

Теперь установите скрипт в любом необходимом месте веб-страницы между тегами <body>…< /body >:

<a href="javascript:window.print()"><img src="print.jpg"></a>

где, print.jpg – это путь к изображению принтера.

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

/* кнопка при наведении мышки */
a:hover
{
-webkit-filter: grayscale(100%); /* Эффект «Черно-белой кнопки» */
}

Вот абсолютно готовый код:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Кнопки и ссылки на JavaScript для распечатывания веб-страниц на блоге BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/* кнопка при наведении мышки */
a:hover
{
-webkit-filter: grayscale(100%); /* Эффект «Черно-белой кнопки» */
}
</style>
</head>
<body>
<a href="javascript:window.print()"><img src="print.jpg"></a>
</body>
</html>

Все скрипты были проверенны на работоспособность в таких браузерах как OPERA, Mazilla, Google Chrome, Internet Explorer. Все гуд!!!
Вы можете посмотреть демонстрацию.

[Посмотреть демонстрацию]

Ну, у меня все! Всем пока.