전체 페이지를 인쇄하지 않고 버튼 클릭 시 특정 HTML 요소를 어떻게 인쇄할 수 있습니까?

페이지를 인쇄하지 않고 버튼 클릭 시 HTML 요소 인쇄

이 시나리오에서는 버튼으로 트리거되는 HTML 콘텐츠를 인쇄하는 방법을 모색합니다. 인쇄 출력에서 ​​전체 웹 페이지를 캡처하지 않고 클릭합니다. 다음 해결 방법을 고려하십시오.

CSS 인쇄 미디어 규칙

CSS 인쇄 미디어 규칙을 사용하면 인쇄 목적으로만 콘텐츠를 선택적으로 표시할 수 있습니다. 이를 구현하는 방법은 다음과 같습니다.

<code class="css">/* CSS file */

@media print {
  /* Hide any element you don't want to print */
  .noPrint {
    display: none;
  }

  /* Set elements you want to print to display */
  h1 {
    color: #f6f6;
  }
}

/* Elements in the HTML page */

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

설명

• @media 인쇄 규칙은 인쇄 매체에 특정한 스타일을 정의합니다.
• noPrint 클래스가 있는 요소는 인쇄 시 숨겨집니다(display: none 사용).

• 인쇄하려는 콘텐츠가 포함된 요소는 인쇄 매체에 표시되도록 설정되어 있으며 고유한 색상을 갖습니다.

• "Print Me" 버튼을 클릭하면 window.print()가 호출되어 수정된 페이지가 인쇄됩니다. , 이제 원하는 요소만 포함됩니다.

장점

• 원치 않는 콘텐츠 인쇄를 방지합니다.
• 깨끗하고 정돈된 상태를 유지합니다. 인쇄 출력.
• 유연한 콘텐츠 제어가 가능하여 관련 정보만 인쇄됩니다.

위 내용은 전체 페이지를 인쇄하지 않고 버튼 클릭 시 특정 HTML 요소를 어떻게 인쇄할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!