HTML로 페이지 인쇄
-
HTML로 특정 콘텐츠를 인쇄하려면
@media print안에display:none을 사용하여 콘텐츠 숨기기 -
id를onClick이벤트 리스너에 전달하여 HTML의 특정 콘텐츠 인쇄
이 기사에서는 페이지의 특정 콘텐츠를 HTML로 인쇄하는 몇 가지 방법을 소개합니다.
HTML로 특정 콘텐츠를 인쇄하려면 @media print 안에 display:none을 사용하여 콘텐츠 숨기기
CSS를 사용하여 종이에 인쇄할 때 웹 페이지의 모양을 변경할 수 있습니다. 웹 콘텐츠를 인쇄하는 동안 웹에 하나의 CSS 스타일을 설정하고 다른 CSS 스타일을 설정할 수 있습니다.
CSS @media print 규칙을 사용하면 HTML 콘텐츠를 인쇄하는 동안 스타일을 변경할 수 있습니다.
HTML 내용을 인쇄하려면 JavaScript가 필요합니다. window.print() 메소드를 사용하면 현재 창을 인쇄할 수 있습니다.
print() 메소드는 선호하는 인쇄 옵션을 선택할 수 있는 Print 대화 상자를 엽니다. 현재 창을 인쇄하기 위해 버튼을 클릭한 후 window.print()를 호출할 수 있습니다.
@media print를 사용하여 인쇄하지 않으려는 HTML 콘텐츠에 대해 display 속성을 none으로 설정할 수 있습니다. 웹에 해당 내용이 있음에도 불구하고 인쇄 옵션 내부에 HTML 내용이 표시되지 않습니다.
예를 들어 HTML에서 h1 태그를 사용하여 두 개의 제목을 만듭니다. 첫 번째 제목은 Need to print this로, 두 번째 제목은 Don't need to print this로 지정합니다.
두 번째 제목의 클래스 이름을 dontPrint로 지정합니다. 그런 다음 버튼을 만들고 이름을 인쇄로 지정합니다.
또한 이 버튼에 dontPrint라는 클래스 이름을 지정하십시오. 버튼에 대한 onClick 리스너를 만들고 버튼을 클릭할 때 window.print() 메서드를 호출합니다.
CSS 섹션의 @media print 내부에서 dontPrint라는 클래스의 표시 속성을 none으로 설정합니다.
아래 예는 Print 버튼을 클릭할 때 dontPrint 클래스 이름을 가진 제목과 버튼이 인쇄 섹션에 표시되지 않음을 보여줍니다.
예제 코드:
<h1>
Need to print this
</h1>
<h1 class="dontPrint">
Don't need to print this
</h1>
<button onclick="window.print();" class="dontPrint">
Print
</button>
@media print {
.dontPrint{
display:none;
}
}
id를 onClick 이벤트 리스너에 전달하여 HTML의 특정 콘텐츠 인쇄
이 방법에서는 인쇄할 특정 콘텐츠의 id를 만들 수 있습니다. 그런 다음 onClick 이벤트 리스너를 사용하여 id를 JavaScript 함수에 전달할 수 있습니다.
JavaScript는 window.print() 메소드를 사용하여 지정된 내용을 인쇄합니다.
innerHTML 속성은 요소의 HTML 콘텐츠를 설정하거나 반환합니다. document.getElementById() 메소드와 함께 JavaScript로 인쇄된 내용을 선택하는 데 사용할 수 있습니다.
마찬가지로 document.body 속성과 함께 innerHTML 속성을 사용하여 HTML 문서의 원본 콘텐츠를 보존할 수 있습니다. 내용을 인쇄한 후 document.body.innerHTML 속성에서 HTML 문서의 원본 내용을 설정할 수 있습니다.
더 명확하게 이해하기 위해 아래 지침을 살펴보겠습니다.
예를 들어 div를 만들고 printIt의 id를 지정합니다. 그 div 안에 h1 태그를 만들고 그 안에 Need to print this라고 쓰세요.
div 외부에서 button을 만들고 이름을 Print로 지정합니다. 버튼에 대한 onclick 리스너를 만들고 printIt id를 매개변수로 사용하여 printOut 함수를 호출합니다.
JavaScript 섹션에서 divId 인수를 사용하여 printOut이라는 함수를 작성하십시오. divId의 innerHTML을 저장할 printOutContent라는 변수를 만듭니다.
다음으로, HTML 본문의 innerHTMl을 저장할 또 다른 변수 originalContent를 작성하십시오. 데모는 아래에 나와 있습니다.
var printOutContent = document.getElementById(divId).innerHTML;
var originalContent = document.body.innerHTML;
다음으로 본문의 innerHTML을 printOutContent 변수로 설정합니다.
그런 다음 window.print() 메서드를 호출합니다. 메소드 호출 후, 본문의 innerHTML을 originalContent 변수로 설정합니다.
document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;
여기에서 window.print() 메소드를 호출하면 document.body.innerHTML에는 인쇄할 요소만 포함되어 있으므로 divId id 섹션만 인쇄합니다. 내용이 인쇄되면 전체 HTML 문서의 내용이 원래 상태로 설정됩니다.
따라서 JavaScript를 사용하여 HTML 문서의 특정 내용을 인쇄했습니다.
예제 코드:
<div id="printIt">
<h1>
Need to Print this
</h1>
</div>
<button onClick="printOut('printIt')">
Print
</button>
function printOut(divId) {
var printOutContent = document.getElementById(divId).innerHTML;
var originalContent = document.body.innerHTML;
document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;
}