버튼 클릭 시 선택한 HTML 콘텐츠만 인쇄하는 방법은 무엇입니까?

버튼 클릭 시 선택적으로 HTML 콘텐츠 인쇄

웹 개발자는 사용자가 포함하지 않고 웹 페이지의 특정 섹션을 인쇄할 수 있도록 허용해야 하는 경우가 종종 있습니다. 전체 페이지 콘텐츠. 이러한 맥락에서 다음과 같은 질문이 생깁니다.

버튼을 클릭했을 때 페이지의 나머지 부분을 제외하고 선택한 HTML 콘텐츠만 인쇄하려면 어떻게 해야 합니까?

해결책:

디스플레이에 숨겨진 HTML 콘텐츠를 유지하기 위해 제안된 솔루션: print div는 유효한 접근 방식입니다. 그러나 더 간단하고 효율적인 방법이 있습니다.

인쇄 스타일시트 만들기:

1. 다음을 포함하는 "print.css"라는 CSS 파일을 만듭니다. 코드:

<code class="css">@media print {
  .noPrint {
    display: none;
  }
}</code>

이 코드는 페이지가 인쇄될 때 "noPrint" 클래스가 있는 요소를 숨깁니다.

2. NoPrint 클래스 적용:

인쇄해서는 안 되는 HTML 콘텐츠를 식별하고 다음 요소에 "noPrint" 클래스를 추가합니다.

<code class="html"><h1 class="noPrint">No Print</h1></code>

3. 다음을 포함합니다. 인쇄 스타일시트:

HTML 문서 섹션:

<code class="html"><link rel="stylesheet" href="print.css" media="print"></code>

4. 인쇄 버튼 추가:

클릭 시 인쇄 대화 상자를 실행하는 버튼 만들기:

<code class="html"><button onclick="window.print()">Print</button></code>

설명:

인쇄 버튼을 클릭하면 window.print() 메서드가 호출되어 브라우저의 인쇄 대화 상자가 열립니다. CSS 미디어 쿼리 @media print { ... }가 트리거되어 "noPrint" 클래스가 있는 요소가 숨겨집니다. 결과적으로 원하는 HTML 내용만 인쇄됩니다.

위 내용은 버튼 클릭 시 선택한 HTML 콘텐츠만 인쇄하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!