javascript를 사용하여 특정 DIV 내의 컨텐츠만 인쇄하기

크롬이나 Internet Explorer에서 오른쪽 버튼을 눌러 인쇄할 때 특정 DIV 요소 내의 컨텐츠만을 인쇄하기를 원할 수 있습니다. 이 경우에 자바스크립트나 jQuery를 사용하여 쉽게 해결할 수 있습니다.

여러 가지 javascript/jQuery 스크립트로 테스트하여 다음 코드가 제대로 작동하는 것을 확인했습니다.

function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // IE >= 10에 필요
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
// Source: stackoverflow

그러면 <div id="mydiv">...</div>에 둘러싸인 영역이 인쇄됩니다.

간혹 특정 부분을 인쇄에서 배제하여 인쇄되지 않도록 하기를 원할 수 있습니다. 경우에 다음과 같은 jQuery 스크립트를 사용하여 클릭했을 때 숨겨지도록 한 다음 인쇄해도 괜찮을 것입니다.

var $ = jQuery;
$(function(){
$(".hidecontent").hide();
$(".showcontent").on("click", function(){
$(".hidecontent").toggle();
});
});

위의 방법이 생각처럼 작동하지 않을 경우 인터넷에서 원하는 솔루션이 나와있을 수 있으니 검색을 통해 다양한 방법을 시도해보시기 바랍니다.

참고로 웹페이지를 인쇄할 때 간혹 위쪽 여백 때문에 인쇄에 어려움을 겪는 경우를 목격하게 됩니다. 이런 경우 CSS를 통해 여백을 조정하여 인쇄하는 방법을 생각할 수 있습니다. 이 상황에서 사용할 수 있는 방법으로 인쇄 시에 wrapper 요소에 특정 클래스를 추가한 후에 여백 등이 조정되도록 할 수 있습니다.

$("button").click(function(){
$("body").addClass("intro");
});

위와 같이 addClass 메소드를 사용하여 클릭을 하면 특정 태그에 클래스가 추가되도록 하고, CSS로 레이아웃을 지정하면 됩니다(addClass 메소드에 대한 자세한 내용은 여기를 참고하세요).

예를 들어, 워드프레스 게시판 플러그인인 KBoard에서 내용을 인쇄할 경우 환경에 따라 인쇄 시 위쪽에 여백이 생길 수 있습니다. 이런 경우, 여러 가지 해결 방법이 있겠지만 위의 방법도 하나의 해결 방법이 될 수 있습니다.

자바스크립트/jQuery 템플릿/PHP 스크립트:

기능을 직접 구현하는 것에 어려움을 겪거나 시간을 절약하고 싶은 경우 워드프레스 플러그인 등 다양한 종류의 코드를 판매하는 CodeCanyon에서 원하는 기능(예: 슬라이더)의 Javascript/jQuery 템플릿이나 PHP 스크립트가 있는지 검색해볼 수 있습니다.

자바스크립트/jQuery 템플릿/PHP 스크립트:

댓글 남기기 응답 취소