Skip to main content

Как заблокировать веб-страницу из печати с помощью CSS

Как сохранить веб страницы в пдф pdf - Расширение print friendly | Tatyanka555 (Май 2024)

Как сохранить веб страницы в пдф pdf - Расширение print friendly | Tatyanka555 (Май 2024)
Anonim

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

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

Как заблокировать веб-страницу из печати с помощью CSS

Это легко использовать CSS, чтобы люди не могли печатать ваши веб-страницы. Вам просто нужно создать таблицу стилей с 1 строкой с именем «print.css», которая включает следующую строку CSS.

body {display: none; }

Этот один стиль превратит элемент «тела» ваших страниц в не отображаемый, и поскольку все на ваших страницах является дочерним элементом элемента body, это означает, что вся страница / сайт не будет отображаться.

Когда у вас будет таблица стилей «print.css», вы загрузите ее в свой HTML как таблицу стилей печати. Вот как вы это сделаете - просто добавьте следующую строку в элемент «head» на ваших HTML-страницах.

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

Заблокировать одну страницу за раз

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

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

Получите Fancier с заблокированными страницами

Что делать, если вы хотите заблокировать печать, но не хотите, чтобы ваши клиенты разочаровались? Если они видят пустую печать страницы, они могут расстроиться и подумать, что их принтер или компьютер сломан и не понимают, что у вас по существу отключена печать!

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

И закройте этот тег после того, как весь ваш контент написан, в самом низу страницы:

Затем, после того как вы закрыли div «noprint», откройте еще один div с сообщением, которое вы хотите отобразить при печати документа:

Эта страница предназначена для просмотра в Интернете и может не печататься. Пожалуйста, просмотрите эту страницу по адресу http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Включите ссылку на документ CSS для печати с именем print.css:

И в этом документе есть следующие стили:

#noprint {display: none; } #print {display: block; }

Наконец, в стандартной таблице стилей (или во внутреннем стиле в документе) напишите:

#print {display: none; } #noprint {display: block; }

Это гарантирует, что сообщение печати появится только на распечатанной странице, а веб-страница появится только на странице онлайн.

Рассмотрите опыт пользователей

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

Оригинальная статья Дженнифер Крынин. Под редакцией Джереми Жирарда.