Печать определенной области сайта с помощью CSS

Когда-нибудь нужно распечатать только определенную область сайта? Так, Как для разделения этой области печати? CSS это решение!

Проблема

Сценарий: Там был какой-либо сайт на экране, и прямо в середине его своего рода доклад (табличных данных). Как печатать только области, я был заинтересован?

Решение

Как мы знаем, @media печати Это CSS функция, которая позволяет нам управлять стилем что будут напечатаны. Давайте проанализировать две ситуации.

“Не печатать”

1Дело – Печатать все, но удалить одну или несколько областей печати
Когда у вас есть области, которые вы хотите удалить печати легко, просто создайте 1 1 класс в “@media печати” заслоняя видимость и прикрепить его к элементу (тег HTML) Вы не хотите печатать. В случае ниже, Он был создан класс .notprint и назначенные для DIV, который не должен быть напечатан.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!Тип документа html>
<HTML>
<Руководитель>
  <Название>Не печатать</Название>
  <Тип стиля="text/css">
      @Средства массовой информации Печать { 
          .notprint { видимость:скрыт; } 
      }
  </стиль>
</Руководитель>
<тело>
  <сильный>Это будет напечатан!</сильный>
  <Div класс="notprint">
      Это, не будут напечатаны!
  </Div> 
  Здесь также будут напечатаны!             
</тело>
</HTML>

“Да, печать”

2Дело – Включить единый в области печати, и удаление других
Но когда наоборот, IE, Что делать, если я хочу напечатать только определенной области, как DIV, Например, и не хотите, чтобы остальная часть сайта появляются в печати. Это является причиной этого поста! Конечно, также мы будем использовать @media печати, просто думать по-разному. В этом случае, скрывали видимость всех (*) элементы сайта и, затем, только дать видимость элемента, к которому мы хотим напечатать, должным образом назначенные ID, что я назвал #yesprint. Типа того, Мы можем, Например, печатать только содержимое конкретных DIV.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!Тип документа html>
<HTML>
<Руководитель>
  <Название>Да, печать</Название>
  <Тип стиля="text/css">
    @Средства массовой информации Печать {
      * {
        видимость:скрыт;
      }
 
      #yesprint {
        видимость:видимый;
        позиция: абсолютное;
        Вверх:0;
        слева:0;                                     
      }                                  
    }
  </стиль>
</Руководитель>
<тело>
  <сильный>Это не будут напечатаны!</сильный>  
  <div id="yesprint">
      Это и, просто это, будут напечатаны!
  </Div> 
  Здесь также не выходит в печать!            
</тело>
</HTML>

Если не желаемого эффекта, Может быть, это из-за ваш шаблон будет получать остаточный стиль некоторых CSS выше (отец). Попробуйте использовать !важные или изменить код, чтобы заставить ожидаемый результат. См также, если таковая имеется Тег сломанный, без открытия или закрытия.

Я проверял это решение в обозревателе Internet Explorer 9, Firefox 14.0.1 и хром 21.0.1180.8. Все, казалось, для правильной работы… Помните слишком, Что делать, если вы хотите печатать цвета и рисунки фона, Это должна быть настроена непосредственно на каждого браузера. Например, в обозревателе Internet Explorer, Перейдите в меню файл > страница установки и включить опцию “Печать цвета и фоновых изображений“, , как показано ниже. В этом же окне, Вы можете сделать другие параметры печати.

Смотрите также: Изготовление DIV невидимым для печати | Дифференциальная CSS печати.

Что… Используйте на свой страх и риск!

Всего просмотров: 14125

4 Комментарии по “Печать определенной области сайта с помощью CSS

  1. Луан да Кошта сказал:

    Спасибо вам большое за вашу помощь человек, но при попытке напечатать мои div не загрузке css,Я даже создал для печати css . Есть советы?

    • Скопируйте код в точности так, как он отображается в примере сообщение к вашему серверу и проверить, чтобы увидеть если он работает. Попробуйте также поставить CSS, встроенных непосредственно в страницу (и без внешних вызовов), только для целей тестирования. Иногда, Если вы используете сторонние код CSS (как плагины), Некоторые тега определяется как важный!. Использование Firefox с Firebug и постарайтесь правильно определить CSS ID или классы, которые вы хотите изменить. Для этого использовать указатель Firebug! И так далее…

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля отмечены *