인터넷에 보면 javascript로 프린트를 하는데 동적인 TD의 높이 때문에 자칫 페이지가 넘어갈 때 화면이 짤리는 상황을 경험하게 된다.
이를 완벽하게 해결한 쉬운 소스를 공개한다.
보통 폼은 첫번째 장에는 헤더가 있고 다음장부터는 헤더가 없는 경우가 많다.
본 포스팅은 이러한 경우까지 대응하고 있다.
말은 거창하지만 사실 그냥 그만큼 자리 차지하고 있고 그 아랫부분부터는 동적으로 알아서 잘라주고 이어주고 알아서 잘 되니 신경 안써도 된다.
1. 페이지 상단에 본 포스팅의 print.css 첨부파일을 호출한다.
2. 스타일에 아래 코드를 추가한다.
3. body에 print.css의 class인 A4사이즈를 지정한다.
<body class="A4">
4. 첫 페이지의 헤더를 위치시킨다. 내용은 각자 알아서 마음대로 교체하면 됨
id는 SECTIONPAGE1으로 하였다.
실질적인 출력 영역은 DIVTOPAREA class로 지정하였고 내용을 담당하는 DIV의 class는 DIVDATAAREA
끝으로 다음 tr의 높이가 페이지를 넘어서서 짤리게 될 경우 페이지 하단에 공백을 계산하여 넣어줘야 하므로 공백 DIV인 DIVBUFFERAREA가 추가되었다.
제목헤더인 DIVTOPAREA는 1페이지만 출력시키므로 SECTIONPAGE1에만 추가되어 있다.
참고로 여기서 거론한 class를 제외한 tdPrintWhite 클래스 등은 그냥 내 소스의 공통 css에서 사용되는 클래스이므로 무시하면 됨
<section class="sheet padding-10mm" id="SECTIONPAGE1">
<div class="DIVTOPAREA">
<table class="" width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td class="tdPrintWhite" width="100%;" align="center"><h1>제목헤더영역</h1>
<a href="#" class="btnblue" id="BTNPRINT">인쇄</a>
</td>
</tr>
</table>
</div>
<br />
<div class="DIVDATAAREA"></div>
<div class="DIVBUFFERAREA"></div>
</section>
5.데이터를 출력시킬 SECTIONPAGE영역을 여유있게 미리 만들어 둔다.
동적으로 그때그때 생성해도 되지만 이게 편하다.
난 총 4페이지까지면 충분하므로 2부터 4까지 for문을 돌려 생성하였다.
<%
for iSEL = 2 to 4
%>
<%
여기까지 진행했으면 일단 1차 준비는 끝났다.
이제 실질적으로 큰 영역에 모든 데이터들을 뿌려주고 페이지가 모두 로딩이 된 후 이 영역의 데이터들을 계산하여 앞서 만들어둔 SECTIONPAGE section의 DIVDATAAREA에 붙여넣기를 진행할 것이다.
6.보면 div에 id가 부여되었고 class도 편의상 id와 동일하게 부여하였다.
특이한 점은 rowspan이 2이다.
즉 아래와 같은 표형태이다.
굳이 왜 rowspan을 예로 들었냐면 그 이유는 잠시 후 아래에서 설명할 것이다.
이것 때문에 약간 고생을 한 경험이 있기 때문이다.
| 순번 | 성명 | 항목 | 현황 | ||
| 근거 | 일자 | 기종 | |||
......for문을 통해 모든 데이터들을 각자 알아서 출력......
</table>
</div>
7.여기까지 HTML소스 끝이다.
이제 jQuery, javascript로 DIVITEMBODY의 데이터들을 계산해서 복사 붙여넣기를 하면 된다.
소스는 그냥 복사해서 붙여넣기 해보면 잘 동작할 것이다.
응용하려면 로직이 비교적 간단하니 바보 아니면 이해 가능한 수준이기도 하고 ;p
위에서 설명하기로 했던 내용으로 중요한 부분인 rowspan이 없는 헤더인 경우 "//헤더TR이 2줄 이므로 if (index == 0) 대신 if (index<= 1)로 사용"하라고 주석까지 달아 두었다.
SECTION을 4개가 아닌 10개를 만들었다면 for (nSectionPage = 2; nSectionPage <= 4; nSectionPage++)의 4를 10로 바꾸면 된다.
이 정도면 정말 이유식을 떠먹여줬다 본다.
나머진 복사 붙여넣기 하면 끝
<script>
$(document).ready(function() {
var bAppendEnd = false;
var nLastTrIndex = 0;
var nSectionPage = 1;
var objSECTIONPAGE;
var objTopArea;
var objDataArea;
var objBufferArea;
objSECTIONPAGE = $("#SECTIONPAGE" + nSectionPage);
objTopArea = objSECTIONPAGE.find($(".DIVTOPAREA"));
objDataArea = objSECTIONPAGE.find(".DIVDATAAREA");
objBufferArea = objSECTIONPAGE.find(".DIVBUFFERAREA");
objDataArea.append($("#DIVITEMBODY").clone().attr("id", "DIVITEMBODY" + nSectionPage));
var fSafeArea = 1118.740157 - (objTopArea.height() + 37.79527559);
objSECTIONPAGE.find($(".DIVITEMBODY tr")).each(function(index, tr) {
if (fSafeArea - $(this).height() > 0 && bAppendEnd == false) {
fSafeArea = fSafeArea - $(this).height();
nLastTrIndex = index;
if (index == 0) {
if (fSafeArea - $(this).closest('tr').next('tr').height() < 0) {
bAppendEnd = true;
$(this).hide();
fSafeArea = fSafeArea + $(this).height();
console.log(objDataArea.html());
objDataArea.hide();
}
}
} else {
bAppendEnd = true;
$(this).hide();
}
});
objBufferArea.height(fSafeArea);
for (nSectionPage = 2; nSectionPage <= 4; nSectionPage++) {
objSECTIONPAGE = $("#SECTIONPAGE" + nSectionPage);
//objTopArea = objSECTIONPAGE.find($(".DIVTOPAREA"))
objDataArea = objSECTIONPAGE.find(".DIVDATAAREA");
objBufferArea = objSECTIONPAGE.find(".DIVBUFFERAREA");
//objTopArea.append($("#DIVTOP").clone().attr("id", "DIVTOPAREA" + nSectionPage));
objDataArea.append($("#DIVITEMBODY").clone().attr("id", "DIVITEMBODY" + nSectionPage));
fSafeArea = 1118.740157 - 37.79527559;
if (nLastTrIndex < objSECTIONPAGE.find($(".DIVITEMBODY tr")).length - 1) {
bAppendEnd = false;
objSECTIONPAGE.find($(".DIVITEMBODY tr")).each(function(index, tr) {
if (index <= 1) { //헤더TR이 2줄 이므로 if (index == 0) 대신 if (index<= 1)로 사용
$(this).show();
fSafeArea = fSafeArea - $(this).height();
} else {
if (nLastTrIndex >= index) {
$(this).hide();
} else {
if (fSafeArea - $(this).height() > 0 && bAppendEnd == false) {
$(this).show();
fSafeArea = fSafeArea - $(this).height();
nLastTrIndex = index;
} else {
bAppendEnd = true;
$(this).hide();
}
}
}
});
objBufferArea.height(fSafeArea);
} else {
objSECTIONPAGE.hide();
}
}
$("#DIVITEMBODY").hide();
$("#BTNPRINT").click(function(e) {
e.preventDefault();
$("#BTNPRINT").hide();
window.print();
$("#BTNPRINT").show();
});
});
</script>
끝으로 블로그 운영하는 사람들 중 복사하기 막아둔 인간들은 X잡고 반성해라
늬들도 어디서 줍줍한 알량한 잡지식인데 뭐 대단한 지식인냥 복사방지까지 해두고 난리부르스를 추는지 이해가 안간다.
만약 복사방지로 애써 찾은 소스 복사 할 수 없는 저질 블로그를 만나걸랑 크롬스토어에서 SuperCopy 슈퍼 카피를 추가하면 바로 복사되니 반드시 설치하여 복사에 성공하길 기원한다.
https://chrome.google.com/webstore/detail/supercopy-enable-copy/onepmapfbjohnegdmfhndpefjkppbjkm
SuperCopy 슈퍼 카피
오른쪽 키 허용, 선택 허용, 복사 허용, 붙 여 넣 기 허용.
chrome.google.com
이상 전달 끝
'모바일 & 앱' 카테고리의 다른 글
| jQuery checkbox 여러개 중 1개만 선택 가능하게 만들기 (0) | 2022.09.15 |
|---|---|
| javascript 오버로드로 함수 만들기 (0) | 2022.08.08 |
| 앱스토어로 Xcode 업데이트 멈춤 현상 해결 방법 (1) | 2022.05.31 |
| 쿼리분석기에선 빠른데 웹페이지에선 느린 기묘한 현상 해결 방법 (0) | 2022.05.17 |
| 네이버의 수집보류 (0) | 2022.05.11 |
