BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Согласитесь, что на таких сайтах, где можно распечатать копию договора, квитанции, полезную информацию, очень удобно на странице разместить кнопку или ссылку для печати документа. Конечно, можно было бы обойтись и без кнопки, если бы все пользователи знали, что при нажатии горячих клавиш «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. Все гуд!!!
Вы можете посмотреть демонстрацию.

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

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Юлия

    Здравсвуйте! Подскажите пожалуйста, как установить кнопку печать на всплывающем окошке (фото) и чтобы печаталась только это фото, а не вся страница?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте!

    @media print {
        /* здесь будут стили для печати */
        .blok1, .blok2, .blok3 {
            display: none;
        }
    }
    

    Этот код нужно вставить в CSS.
    .blok1, .blok2, .blok3 – это css блоки, которые нужно скрыть.

    Если вы используете Bootstrap, то там такая возможность уже есть:
    Скрытие и отображение элементов для печати

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 784
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4327