[css] 웹 페이지를 인쇄 할 때 요소를 숨기려면 어떻게합니까?

웹 페이지에 웹 페이지를 인쇄 할 수있는 링크가 있습니다. 그러나 링크는 인쇄물 자체에도 표시됩니다.

인쇄 링크를 클릭하면 링크 버튼을 숨기는 자바 스크립트 또는 HTML 코드가 있습니까?

예:

 "Good Evening"
 Print (click Here To Print)

“Good Evening”텍스트를 인쇄 할 때이 “인쇄”레이블을 숨기고 싶습니다. 인쇄물 자체에 “인쇄”레이블이 표시되지 않아야합니다.

답변

스타일 시트에서 다음을 추가하십시오.

@media print
{
    .no-print, .no-print *
    {
        display: none !important;
    }
}

그런 다음 class='no-print'단추와 같이 인쇄 된 버전에 표시하지 않으려는 HTML에 인쇄 할 수없는 클래스를 HTML에 추가하십시오 (또는 기존 클래스 명령문에 추가하십시오).

답변

부트 스트랩 3가 그 자신 이에 대한 클래스 라는를 :

hidden-print

다음과 같이 정의됩니다.

@media print {
  .hidden-print {
    display: none !important;
  }
}

직접 정의 할 필요는 없습니다.

에서 부트 스트랩 4 이이 변경되었습니다 :

.d-print-none

답변

가장 좋은 방법은 인쇄용으로 스타일 시트 를 사용 하고 media속성을로 설정하는 것 print입니다.

종이에 인쇄하려는 요소를 표시하거나 숨 깁니다.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

답변

이 CSS를 넣는 간단한 해결책은 다음과 같습니다.

@media print{
   .noprint{
       display:none;
   }
}

그리고 여기 HTML이 있습니다

<div class="noprint">
    element that need to be hidden when printing
</div>
<div class="noprint">
    element that need to be hidden when printing
</div>

답변

CSS 파일

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTML 헤더

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

요소

<div class="no-print"></div>

답변

div 내에 링크를 놓은 다음 앵커 태그에서 JavaScript를 사용하여 div를 숨길 수 있습니다. 예 (테스트되지 않았으므로 조정해야하지만 아이디어를 얻음) :

<div id="printOption">
    <a href="javascript:void();"
       onclick="document.getElementById('printOption').style.visibility = 'hidden';
       document.print();
       return true;">
       Print
    </a>
</div>

단점은 한 번 클릭하면 버튼이 사라지고 페이지에서 해당 옵션이 손실된다는 것입니다 (항상 Ctrl + P가 있음).

더 나은 해결책은 인쇄 스타일 시트를 작성하고 해당 스타일 시트 내에서 printOptionID 의 숨겨진 상태 (또는 사용자가 호출하는 것)를 지정하는 것입니다. HTML의 head 섹션에서이 작업을 수행하고 media 속성으로 두 번째 스타일 시트를 지정할 수 있습니다.

답변

가장 좋은 방법은 페이지의 “인쇄 전용”버전을 만드는 것입니다.

아 잠깐만 .. 이건 더 이상 1999 년이 아니야 “display : none”과 함께 인쇄 CSS를 사용하십시오.