Как добавить виджет «Печать этой страницы» на свою веб-страницу? »WebNots

«Control + P» и «Command + P» — это сочетания клавиш, используемые для открытия диалогового окна печати в Windows и Mac соответственно. Хотя он обычно используется в таких приложениях, как Word и Pages, многие люди не печатают веб-страницы. Если вы настаиваете на том, чтобы пользователи распечатали любую из ваших веб-страниц, лучший способ — разместить значок принтера в подходящем месте, чтобы вызвать диалоговое окно печати. Это легко сделать с помощью JavaScript. В этой статье мы объясним, как добавить виджет печати этой страницы на вашу веб-страницу.

Как добавить виджет «Печать этой страницы» на свою веб-страницу?

В JavaScript есть команда окна печати по умолчанию как «window.print ()». Здесь нам нужно связать эту команду JavaScript с тегом изображения HTML. Таким образом, всплывающее диалоговое окно печати будет запускаться при нажатии на изображение.

Шаг 1. Изображения значков принтера

Давайте сначала загрузим на веб-сайт красивое изображение значка принтера. Ниже приведены некоторые из изображений, которые вы можете использовать.

Получите полный URL-адрес изображения после его загрузки на ваш сайт. Например, мы используем первое изображение в этом примере, а его URL-адрес — «https://img.webnots.com/2016/10/Printer.png».

Шаг 2 — Вставьте HTML-код

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

<a href="https://www.webnots.com/how-to-add-print-this-page-widget-on-your-webpage/javascript:window.print()">
<img border="0" src="https://img.webnots.com/2016/10/Printer.png" width="50" height="50">
</a>

Не забудьте изменить URL-адрес на свой собственный. Если ваше изображение имеет другой размер, настройте его с помощью параметров ширины и высоты.

Шаг 3 — Тестирование в браузере

Опубликуйте свой сайт и откройте веб-страницу в браузере. Поскольку «window.print ()» — это собственная команда JavaScript для запуска диалогового окна печати, она должна работать во всех браузерах, таких как Chrome, Firefox, Safari и т. Д. Щелкните значок принтера, и диалоговое окно печати должно открыться аналогично нажатию « Control / Command + P ».

Открытие диалогового окна печати в браузере Safari

Пользователи могут либо распечатать, либо сохранить веб-страницу в формате PDF. См. Статью о том, как преобразовать веб-страницу в PDF в Google Chrome.

Шаг 4 — Украшение значка принтера

Если вы чувствуете, что изображение такое простое, и хотите добавить больше украшений, используйте CSS для настройки внешнего вида. Вы можете добавить класс CSS в код HTML, как показано ниже, вместе с определениями стилей:

<style>
.printer {
box-shadow: 1px 1px #3f51b5;
background: #03A9F4;
border: 1px solid #ff9800;
border-radius: 10px;
padding: 3px;
}
</style>

<a href="https://www.webnots.com/how-to-add-print-this-page-widget-on-your-webpage/javascript:window.print()">
<img class="printer" src="https://img.webnots.com/2016/10/Printer.png">
</a>

Последний виджет будет выглядеть, как показано ниже, и щелкните значок принтера, чтобы открыть диалоговое окно печати.