결론부터 말하면 이 한줄만으로 가능하다.
현업에서 증명서 양식을 디자인하고 인쇄해야 하는 기능을 추가해야 했다.
프린트 기능은 java 단에서 복잡하게 이루어질 줄 알았는데,
자바스크립트에서 인쇄하기 버튼에 단순히 onclick="javascript:window.print()" 한 줄만 추가해주면 되었다.
<button onclick="javascript:window.print()">인쇄</button>
인쇄를 구현하는 방식은 다양하겠지만,
간단하게
1) 팝업창 생성(컨트롤러)
2) 인쇄할 페이지 표시(컨트롤러에서 리턴한 jsp 파일)
3) 인쇄 버튼 누르기(팝업창의 최상단에 버튼 위치) 의 과정으로 만들었다.
과정 세부설명)
일단은, 만들어야 하는 증명서가 기본적인 표 형식이었기 때문에,
jsp 파일을 만들고 퍼블리셔 분께 행 높이, 버튼 위치 등의 style 지정을 요청드렸다.
controller에는 팝업창을 불러올 수 있는 메소드를 작성하였다.
그리고 작성했던 jsp 파일에서 맨 위에 인쇄 버튼이 포함된 navbar를 추가하였고, 위에 작성한 코드 한 줄을 넣었다.
이렇게 빠르게 끝내도 되나 싶었는데, 빨리 끝났다.
추가 고려사항)
1) 물론 팝업창을 띄울 때 javascript에서 width와 height도 적당히 지정해주어야 하며
(인쇄되는 영역이 너무 잘리지 않을 정도로 했다),
2) body 태그를 A4 사이즈로 맞춰주었고,
3) 실질적으로 인쇄되는 부분(class="page")도 A4 사이즈에서 위아래좌우로 여백이 조금 남겨지게끔
style 코드를 작성하였다.
<style>
body {
width: 210mm; /* A4 size */
height: 297mm; /* A4 size */
padding: 20mm;
box-sizing: border-box;
}
.page {
width: calc(210mm - 40mm);
height: calc(297mm - 40mm);
box-sizing: border-box;
}
</style>
<body>
<div class="navbar">
<button onclick="javascript:window.print()">인쇄</button>
</div>
<div class="page">
//내용
</div>
</body>
인쇄 버튼 누르고 나오는 화면)
pdf 저장도 되고, 연결된 프린터에서 인쇄도 된다.
(브라우저에서 흔히 봤던 그 인쇄 창...)
즉, css 작업이 가장 번거롭지만, 인쇄 기능은 저 한 줄이면 끝.
'05. etc' 카테고리의 다른 글
| [SSL 인증서] HTTP인증 후 리눅스 서버에 인증서 업로드 방법 (0) | 2024.06.27 |
|---|---|
| [JQuery] 배열로 자바스크립트 함수 실행여부 확인하기 (0) | 2024.06.27 |
| [네트워크] 실행된 이클립스 프로젝트를 다른 pc에서 접속하는 법 (0) | 2024.06.27 |
| [Ajax] Ajax 사용하여 목록 테이블의 특정 데이터만 변경하기 (0) | 2024.06.27 |
| [Eclipse] 이클립스 캐시 삭제하는 법 (0) | 2024.06.19 |