웹에서 프린트 제어가 불가능 한 줄 알았는데 프린트 클릭 시 스크립트로 해당 이벤트를 받아올 수 있다.
하지만 스크립트를 사용하는 방법은 브라우저마다 작동을 하지 않을 수 있다.
좀 더 찾아보니 css로 인쇄되는 영역을 제어를 해줄 수 있다. @media print를 이용하면 된다.
하지만 스크립트를 사용하는 방법은 브라우저마다 작동을 하지 않을 수 있다.
좀 더 찾아보니 css로 인쇄되는 영역을 제어를 해줄 수 있다. @media print를 이용하면 된다.
<html>
<head>
<title>print test page</title>
<style>
@media print {
.np{
display:none;
}
}
</style>
</head>
<body>
<div class="np">
test
</div>
<div>
test1
</div>
<div>
test1
</div>
<div>
test1
</div>
</body>
</html>
위 코드를 보면 np 클래스를 @media print에 넣어주었다. @media print는 인쇄됐을 때의 스타일을 지정을 해주는 것이다.
위에서는 해당 페이지를 인쇄할 때 p를 display : none으로 가려주었다.
@media print를 이용하면 좀 더 멋진 인쇄물을 만들 수 있다.
위에서는 해당 페이지를 인쇄할 때 p를 display : none으로 가려주었다.
@media print를 이용하면 좀 더 멋진 인쇄물을 만들 수 있다.
<script>
var beforePrint = function() {
console.log('이 Function은 프린트 이전 호출');
};
var afterPrint = function() {
console.log('이 Function은 프린트 이후 호출');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
</script>
해당 코드는 프린트 전, 후로 호출되는 스크립트 입니다.
chrome, opera, explore에서는 정상작동을 하지만 타 브라우저는 정상적으로 작동하지 않을 수 있습니다.
chrome, opera, explore에서는 정상작동을 하지만 타 브라우저는 정상적으로 작동하지 않을 수 있습니다.
댓글
댓글 쓰기