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

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

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

프린트 링크를 클릭하면 링크 버튼을 숨길 수 있는 자바스크립트나 HTML 코드가 있습니까?

예:

 "Good Evening"
 Print (click Here To Print)

이 "인쇄" 레이블이 "안녕하십니까" 텍스트를 인쇄할 때 이 "인쇄" 레이블을 숨기려고 합니다.인쇄 라벨은 인쇄물 자체에 표시되지 않아야 합니다.

스타일시트에 다음을 추가합니다.

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

그 다음 추가class='no-print'또는 기존 클래스 문에 인쇄되지 않은 클래스를 추가합니다. 예를 들어, 단추와 같이 인쇄된 버전에 표시하지 않을 HTML을 선택합니다.

부트스트랩 3에는 다음과 같은 고유 클래스가 있습니다.

hidden-print

정의는 다음과 같습니다.

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

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

---

부트스트랩 4와 부트스트랩 5에서 이것은 다음으로 변경되었습니다.

.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>

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의 머리 부분에서 이 작업을 수행하고 미디어 속성이 있는 두 번째 스타일시트를 지정할 수 있습니다.

@media print {
  .no-print {
    visibility: hidden;
  }
}

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

<div>
  Yup
</div>

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

오, 잠깐만...더 이상 1999년이 아닙니다."display: none"과 함께 인쇄 CSS를 사용합니다.

diodus에 의해 받아들여진 대답은 우리 모두는 아니더라도 일부에게는 효과가 없습니다.이 인쇄 단추가 용지에 인쇄되는 것을 계속 숨길 수 없습니다.

CSS 파일을 호출하는 클린트 파클의 약간의 조정은 추가합니다.

      media="screen, print" 

뿐만 아니라

      media="screen"

이 문제를 해결하고 있습니다.그래서 명확성을 위해 그리고 클린트 파클이 댓글에 추가적인 도움을 숨긴 것을 보는 것이 쉽지 않기 때문입니다.사용자는 원하는 형식의 ",print"를 css 파일에 포함시켜야 합니다.

     <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">

모두를 위해 이 문제를 해결한다고 생각합니다.

을 방해하는 , 개별요가간여섭하재정는경있우는하의소성을속의타스일iding가ascript▁if경▁thus우▁that,▁property개는있별▁of▁javascript▁you▁overr▁elementsual▁have▁interfe▁style▁the▁jav▁withres▁individ요소의는.!important하는 것을 제안합니다.onbeforeprint그리고.onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

말했듯이 는 Elias Hasle보다 우선할 수 .!important그래서 저는 이론적 구현으로 그의 답변을 확장했습니다.

가 " 코드는클의모식요별다니합소를든이스래"인 합니다.no-print에서는 인쇄하기 전에 CSS로 숨기고, 인쇄 후에는 원래 스타일을 복원합니다.

var noPrintElements = [];

window.addEventListener("beforeprint", function(event) {
   var hideMe = document.getElementsByClassName("no-print");
   noPrintElements = [];
   Array.prototype.forEach.call(hideMe, function(item, index) {
      noPrintElements.push({"element": item, "display": item.style.display });
      item.style.display = 'none'; // hide the element
   });   
});

window.addEventListener("afterprint", function(event) {
   Array.prototype.forEach.call(noPrintElements, function(item, index) {
      item.element.style.display = item.display; // restore the element
   });      
   noPrintElements = []; // just to be on the safe side
});

언급URL : https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page