페이지 표시에 영향을 주지 않고 특정 HTML 콘텐츠를 인쇄하는 방법은 무엇입니까?

페이지 표시에 영향을 주지 않고 특정 HTML 콘텐츠 인쇄

웹 개발에서 버튼을 클릭할 때 특정 HTML 콘텐츠를 인쇄해야 하는 시나리오가 발생할 수 있습니다. 페이지의 현재 표시를 방해합니다. 귀하가 언급한 솔루션을 포함하여 다양한 솔루션이 존재합니다. 콘텐츠를 숨겨진 div에 배치하는 것입니다.

그러나 CSS 미디어 쿼리를 사용하면 보다 효율적인 접근 방식을 얻을 수 있습니다.

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

여기서 인쇄하면 안 되는 요소에는 "noPrint"라는 클래스가 적용됩니다. 인쇄 대화 상자가 열리면 @media 인쇄 블록 내에 정의된 스타일이 적용되어 웹페이지의 원래 모양을 유지하면서 이러한 요소를 숨깁니다.

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

이 코드에서 "print me" 제목은 "noPrint" 클래스가 있는 요소는 숨겨지는 반면 인쇄됩니다. 이 방법을 사용하면 인쇄 출력에 대한 유연성과 제어력이 향상되어 의도한 내용만 프린터로 전송됩니다.

위 내용은 페이지 표시에 영향을 주지 않고 특정 HTML 콘텐츠를 인쇄하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!