Как добавить кнопку печати на вашу веб-страницу

Реклама

Вы знаете, что-то вроде добавления кнопки печати на веб-страницу звучит довольно просто, верно? На самом деле, зачем нам вообще добавлять какую-либо кнопку печати или ссылку на страницу, когда все, что нужно сделать читателю, это нажать «файл" а также "Распечатать…В меню браузера?

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

Для каждой из этих ситуаций существуют разные решения. Мы всегда старались предложить инновационные решения для печати здесь, в MUO, такие как статья Джастина о печать на полстраницах Экономьте бумагу, отформатировав и распечатав файлы с помощью инструмента наложения Govert [Windows]

Бумага стоит денег. Сохраните оба, напечатав ваши PDF-файлы на полстраницы. Если вам нужен буклет или параллельные копии, бесплатный инструмент для Windows делает это не только возможным, но и простым. Перестань безобразничать... Читать далее и статья Карла о PrintWhatYouLike PrintWhatYouLike - экономьте бумагу и чернила при печати веб-страниц Читать далее . В этой статье я расскажу о четырех способах интеграции кнопки печати или ссылки в ваш сайт - от очень простого подхода HTML и Javascript до более настраиваемого CSS подходить.

Интеграция печати на ваш сайт

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

Если у вас довольно простой веб-сайт, или вас не волнует, все ли графики и форматирование распечатаны, то все вам нужно добавить простую кнопку на веб-страницу и использовать метод javascript «print ()» для отправки веб-страницы на принтер.

Размещение этого кода на вашем сайте в удобном для ваших читателей месте выглядит примерно так.

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

Некоторым людям не очень нравится внешний вид кнопки формы, поэтому в качестве альтернативы вы можете просто использовать ссылку со встроенным JavaScript, чтобы сделать то же самое.

Распечатайте эту страницу. 

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

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

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

Заголовок DIV #, DIV # newflash, баннер DIV # {display: none;} тело {видимость: скрытый;} .print {visibility: visible;}

Теперь, когда ваш CSS-файл настроен, все, что вам нужно сделать, - это пройтись по странице и пометить каждый раздел классом «print».

Эта строка будет напечатана. 

Эта строка не будет. 

Теперь вы можете увидеть в распечатке, где только разделы страницы, помеченные классом «print», печатаются на странице, а все остальные разделы - нет. Единственная сложность этого подхода заключается в том, что вы должны обязательно отключить отображение всех разделов DIV, которые вы не хотите печатать. Как вы можете видеть ниже, я не добавил раздел «div» для рекламы Google, так что он все еще печатается.

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

Это все, что вам нужно сделать! Вы можете встроить кнопку печати на свой сайт, как в приведенных выше примерах, но вместо файла CSS, загруженного для метода печати, PDF, DOC или другой файл отправляется на принтер. Как вы можете видеть ниже, это создает самую чистую версию вашей страницы для печати, и вы можете в значительной степени настроить ее так, чтобы она выглядела именно так, как вы хотите.

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

Вы пробовали какой-либо из этих способов добавить кнопку печати на веб-страницу? Какая техника вам больше нравится? У вас есть другие решения? Поделитесь своим пониманием в разделе комментариев ниже.

Кредит изображения: Sundeip Arora