[print] 프린트 페이지 작업하는 방법 (인쇄 영역 테두리 이미지로 삽입, page-break)
*인쇄영역의 경우 css 파일을 include 해 사용할 경우 스타일이 적용되지 않을 수 있으므로 파일 상단 <style></style> 안에 css 작성한다
*page-break 관련 css
1) page-break-before : 해당 엘리먼트의 이전 페이지 넘김 지정
2) page-break-after : 해당 엘리먼트의 다음 페이지 넘김 지정
- auto : 자동
- inherit : 부모값 상속
- always : 해당 엘리먼트의 이전/다음 페이지 넘김
- avoid : 해당 엘리먼트의 이전/다음 페이지 넘김을 금지
- left : 해당 엘리먼트 이전/다음에 분리된 페이지가 왼쪽 면에 위치
- right : 해당 엘리먼트 이전/다음에 분리된 페이지가 오른쪽 면에 위치
3) page-break-inside : 해당 엘리먼트의 내부 페이지 넘김 지정
- auto : 자동
- inherit : 부모값 상속
- avoid : 페이지 넘김 금지
*background 관련 css
1) -webkit-print-color-adjust: exact;print-color-adjust: exact;
- 인쇄 시 배경이 강제로 보이도록 지정
@media print{
*{-webkit-print-color-adjust: exact;print-color-adjust: exact;}
}
*@page
- 페이지 사이즈 조정
- 속성값 지정하는 방법 예시
@page{size : B5;}
이외에 6in, letter, A4 portrait, landscape 등등
- 머릿글, 바닷글 제거하는 방법 : @page{margin: 0;}
참고 URL
https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size
*상장 레이아웃처럼 인쇄 영역에 들어가는 테두리를 이미지로 삽입하는 방법
<html>
<head>
<title>인쇄 테두리 설정</title>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap">
<script>
$(document).ready(function(e){
window.print();
});
</script>
<style>
/*<![CDATA[*/
*{margin: 0;padding: 0;font-family: 'Noto Sans KR', sans-serif;color: #000;-webkit-box-sizing: border-box;box-sizing: border-box;}
html, body{overflow: inherit;width: 210mm;margin: 0;font-family: 'Noto Sans KR', sans-serif;color: #000;-webkit-box-sizing: border-box;box-sizing: border-box;}
.page{position: relative;z-index: 1;width: 210mm;min-height: 297mm;background-size: 100% !important;background-repeat: repeat-y !important;-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;color-adjust: exact !important;page-break-before: always;page-break-after: always;page-break-inside: auto;}
.page > img{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-55%);transform: translate(-50%,-55%);z-index: -1;}
.page.page1{height: 297mm;}
.page.page2{height: 594mm;}
#print-wrap{overflow: visible;position: relative;font-family: 'Noto Sans KR', sans-serif;}
#print-wrap > img{position: absolute;top: 0;left: 0;z-index: -1;vertical-align: top;}
.print-contents{position: relative;width: 100%;height: 100%;padding: 0;}
.print-contents > img{position: absolute;top: 50%;left: 50%;z-index: -1;margin-top: -85px;margin-left: -200px;}
.print-contents h1{padding-top: 110px;background-image: url('bg_print_top.png') !important;background-size: 100% !important;background-repeat: repeat-y !important;-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;color-adjust: exact !important;font-size: 50px;font-weight: 700;color: #000;text-align: center;}
.print-info{padding: 60px 80px 70px;background-image: url('bg_print_con.png') !important;background-size: 100% !important;background-repeat: repeat-y !important;-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;color-adjust: exact !important;}
.print-conbottom{width: 100%;padding-bottom: 100px;background-position: 0 bottom;background-image: url('/include/img/sub/bg_print_bottom.png') !important;background-size: 100% !important;-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;color-adjust: exact !important;text-align: center;}
@media print{
body{width: 210mm;height: 297mm;}
@page{size: auto;width: 210mm;height: 297mm;margin: 0;padding: 50mm 0;}
.page{margin: 0;border: initial;width: initial;min-height: initial;box-shadow: initial;background: initial;page-break-after: always;}
}
/*]]>*/
</style>
</head>
<body>
<div class="page js-page">
<img src="/include/img/sub/img_print_logo.png" alt="">
<div id="print-wrap">
<div class="print-contents">
<h1>print title</h1>
<div class="print-info">
print contents
</div>
<div class="print-conbottom">
2023-01-01
</div>
</div>
</div>
</div>
</body>
</html>
+)
<![CDATA[ ... ]]> 를 사용하는 이유 ?
특수문자가 들어가더라도 CDATA에 들어가는 문장은 문자열로 인식하게 됨
예를 들면 <, >, =과 같은 부등호 기호를 비교연산자가 아닌 단순 문자(괄호)로 인식하게 해줌
사용법 : <![CDATA[ ... ]]> 사이 ...에 sql 구문 삽입
참고