[SCRIPT] jsp 프린트 기능

오늘은 프린트 기능 구현! 

프린트 버튼을 클릭하면 새창으로 프린트할 내용이 있는 URL 이동, 프린트 완료 후 창닫기까지 구현은 간단하다.

---

 

1. 프린트 버튼이 있는 jsp

• a 태그를 누르면 이동하고자하는 url을 가지고 openAndPrint() 함수로 이동
• newWindow.print()로 프린트 구현

<a href="#" onclick="openAndPrint('/url');" id="print" title="프린트(새창)" class="print">프린트</a>

<script>
function openAndPrint(url) {
  var newWindow = window.open(url, '_blank');
  newWindow.onload = function() {
    newWindow.print();
  };
}
</script>

 

2. 프린트 할 내용이 있는 jsp (url)

• 위에서 지정한 /url 페이지
• 프린트 기능이 끝나고 창을 닫기위한 script
• css가 필요한 상황이라면 개발자모드로 프린트 기능에서 제공하는 css 확인 후 !important로 적용

<script>
	// 프린트 후 창닫기
    window.print(); setTimeout("window.close();", 500); 
</script>

<!-- 프린트 기능의 기본 css가 있기때문에 css변경을 원하면 !important 필수 -->
<style>
	table {border:1px solid black; font-size:10px; -webkit-print-color-adjust:exact;}
	table td {border:1px solid black; height:50px; }
	table th {border:1px solid black; height:50px; background-color: #dedede; font-weight: bold;}
	table th span {font-size:0.9em; color:red;}
	  
	.se-contents table {width : 300pt !important;}
	.se-contents table p span,
	.se-contents p,
	.se-contents p span {font-size: 10px !important;}
</style>

<table>
    <colgroup>
        <col style="width:20%;">
        <col style="width:80%;">
    </colgroup>
    <tbody>
        <tr>
            <th>컬럼1</th>
            <td>데이터1</td>
        </tr>
        <tr>
            <th>컬럼2</th>
            <td><데이터2</td>
        </tr>
    </tbody>
</table>

 

---

 

버튼 클릭 시 아래와 같은 프린트 화면이 보여진다!!

 

 

---

공부하면서 유용했던 부분 메모겸 공유하고자 끄적입니다.

고쳐야하는 부분있다면 댓글 남겨주시면 수정하겠습니다.

행복한 하루 보내세요 (❁´◡`❁)