Как сделать на сайте печать документа

Как сделать на сайте печать документа
Как сделать на сайте печать документа
Как сделать на сайте печать документа

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

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

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

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

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

Выберите любой из указанных скриптов и установите в любом необходимом месте между тегами <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 type="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. Все гуд!!!
Вы можете посмотреть демонстрацию.

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

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓ Последние новости категории: Похожие статьи Популярные статьи: Добавить комментарий

Метки: javascript, для сайта

Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа Как сделать на сайте печать документа

Статьи по теме:



Как сделать большой цветок из цветной бумаги своими руками

Образцы вышивок крестом рукоделие вышивка крестом

Как сделать тюльпан из креповой бумаги своими руками

Как сделать красивую походку парню

Как двухъярусную кровать сделать самому из дерева