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

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

인쇄 링크를 클릭하면 링크 버튼을 숨기는 자바 스크립트 또는 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를 사용하십시오.

diodus가 받아 들인 대답은 우리 모두는 아니지만 일부에게는 효과가 없습니다. 여전히이 단추 인쇄가 용지로 사라지는 것을 숨길 수 없습니다.

Clint Pachl이 추가하여 CSS 파일을 호출하는 작은 조정

      media="screen, print" 

뿐만 아니라

      media="screen"

이 문제를 해결하고 있습니다. 명확성을 위해 그리고 Clint Pachl은 주석에서 추가 도움을 숨기기가 쉽지 않기 때문에. 사용자는 원하는 형식으로 CSS 파일에 ", print"를 포함시켜야합니다.

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

기본 미디어가 아니라 "스크린"입니다.

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

모든 사람 이이 문제를 해결한다고 생각합니다.

당신은 자바 스크립트가있는 경우, 따라서 개별 요소의 스타일 속성을 방해은 오버 라이딩 !important나는 이벤트를 처리, 제안 onbeforeprint하고 onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint