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
<!DOCTYPE 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
<!DOCTYPE html>
<HTML>
<머리>
  <제목>인쇄 예</제목>
  <스타일 형식="text/css">
    @미디어 인쇄 {
      * {
        표시 유형:숨겨진;
      }
 
      #yesprint {
        표시 유형:표시;
        위치: 절대;
        맨 위로:0;
        왼쪽:0;                                     
      }                                  
    }
  </스타일>
</머리>
<바디>
  <강력한>이 인쇄 되지 않습니다.!</강력한>  
  <div id="yesprint">
      이 고, 그냥이, 인쇄 될 것 이다!
  </div> 
  여기도 하지에서 나오는 인쇄!            
</바디>
</HTML>

하지 않을 경우 원하는 효과, 아마 그것 때문에 템플릿에 위의 일부 CSS의 잔여 스타일 받을 (아버지). 사용 하 여 !중요 한 또는 예상된 결과를 코드 조정. 어떤 경우에 참조 태그 브로 큰, 열기 또는 닫기.

나는 인터넷 탐색기에서이 솔루션을 테스트 9, 파이어 폭스 14.0.1 그리고 크롬 21.0.1180.8. 모두 제대로 작동 하는 것 같았다… 기억도, 색상과 배경 이미지를 인쇄 하려는 경우, 이 각 브라우저에서 직접 구성 해야 합니다.. 예를 들어, 인터넷 익스플로러에서, 파일 메뉴 > 페이지 설정 하 고 옵션을 사용 “인쇄 색상과 배경 이미지“, 아래 그림으로. 이 같은 창에서, 다른 인쇄 설정을 지정할 수 있습니다..

참고 항목: 인쇄 하려면 보이지 않는 DIV를 만들기 | CSS를 인쇄.

그건… 자신의 위험에 사용!

총 조회 수: 14079

4 에 대 한 의견 “CSS로 사이트의 특정 영역을 인쇄

  1. Luan 다 코스타 고 말했다:

    대단히 도움말 남자 주셔서 감사 합니다., 하지만 때 내 div를 인쇄 하려고 로드 되지 않습니다 css,인쇄용 css도 만들었습니다. . 어떤 조언을?

    • 그대로 서버에 게시물의 예제에 표시 된 코드를 복사 하 고 그것이 효과가 있는지 테스트. 또한 페이지에 직접 포함 하는 CSS를 넣어 하려고 (그리고 아무 외부 전화), 그냥 테스트용으로. 때로는, 제 CSS 코드를 사용 하는 경우 (플러그인으로), 일부 태그 중요 정의!. 방화 범과 함께 파이어 폭스를 사용 하 고 올바르게 CSS id 또는 클래스를 수정할 확인 하려고. 방화의 포인터를 사용 하 여이 대 한! 등등…

응답을 남기다

귀하의 이메일 주소가 게시 되지 것입니다. 필수 항목으로 표시 됩니다. *