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

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

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

Для каждой из этих ситуаций существуют разные решения. Мы всегда пытались предложить инновационные решения для печати здесь, в MUO, такие как статья Джастина о печати на полстраницах. Экономия бумаги путем форматирования и печати ваших файлов с помощью инструмента наложения Govert [Windows] Экономия бумаги путем форматирования и печати ваших файлов с помощью наложения Govert Инструмент [Windows] Бумага стоит денег. Сохраните оба, напечатав свои PDF-файлы на полстраницы. Хотите ли вы буклет или параллельные копии, бесплатный инструмент для Windows не только делает это возможным, но и простым. Хватит возиться ... и статья Карла о PrintWhatYouLike PrintWhatYouLike - Экономия бумаги и чернил при печати веб-страниц PrintWhatYouLike - Экономия бумаги и чернил при печати веб-страниц. В этой статье я собираюсь предоставить четыре способа интеграции кнопки печати или ссылки на свой веб-сайт - от очень простого подхода HTML и Javascript до более настраиваемого подхода CSS.

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

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

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

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

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

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

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

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

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

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

 Заголовок DIV #, DIV # newflash, баннер DIV # display: none; body visibility: hidden; .print visibility: visible; 

Теперь, когда ваш CSS-файл настроен, все, что вам нужно сделать, это пройти по странице и пометить каждый раздел с помощью “Распечатать” учебный класс.

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

Теперь вы можете увидеть в распечатке, где только разделы страницы, отмеченные “Распечатать” класс печатается на странице, а все остальные разделы - нет. Единственная сложность этого подхода заключается в том, что вы должны обязательно отключить отображение всех разделов DIV, которые вы не хотите печатать. Как вы можете видеть ниже, я не добавил “ДИВ” раздел для рекламы Google, так что до сих пор печатается.

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

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

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

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

Изображение предоставлено: Sundeip Arora