팝업 프린트 관련 질문드립니다.
본문
이런 팝업을 제작했고
<div class="popup">
<div class="bar_tit_wrap mb20">
<div class="bar_tit">사업신청서</div>
<div class="btb_btn">
<a href="#" class="btn-default btn-excel mar">PDF 저장</a>
<a href="#" class="btn-default btn-print">인쇄</a>
</div>
</div>
<div class="height_scroll h657">
<div class="ok_field_wrap">
<div class="ok_field_box mar">
<div class="ok_field">
<div class="th">테스터</div>
<div class="td">
<div class="isradio_wrap">
<div class="isradio mar">
<input type="radio" id="cycapplyGubunN" name="cycapplyGubun" value="N">
<label for="cycapplyGubunN">신규</label>
</div>
<div class="isradio mar">
<input type="radio" id="cycapplyGubunM" name="cycapplyGubun" value="M">
<label for="cycapplyGubunM">변경</label>
</div>
</div>
</div>
</div>
</div>
<div class="ok_field_box mar">
<div class="ok_field">
<div class="th">테스터</div>
<div class="td" id="orgNm"></div>
</div>
</div>
<div class="ok_field_box mar">
<div class="ok_field full">
<div class="th">테스터</div>
<div class="td">
<div class="table_scroll">
<table class="rtable sm w960">
<colgroup>
<col width="15%">
<col width="13%">
<col width="10%">
<col width="10%">
<col width="17%">
<col width="*">
<col width="6%">
</colgroup>
<tbody id="manageList">
<tr>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
</tr>
<tr><td><select class="gselect" name="cycapplyGubun"><option value="M" selected="">테스터</option><option value="S">테스터</option></select></td><td><input type="text" class="ginput wfull" name="cycapplyDept" value="테스터"></td><td><input type="text" class="ginput wfull" name="cycapplyNm" value="테스터"></td><td><input type="text" class="ginput wfull" name="cycapplyPos" value="테스터"></td><td><input type="text" class="ginput wfull" name="cycapplyTel" value="*** 개인정보보호를 위한 휴대폰번호 노출방지 ***"></td><td><input type="text" class="ginput wfull" name="cycapplyEmail" value="*** 개인정보보호를 위한 이메일주소 노출방지 ***"></td><td><div class="mincenter"><a href="#" class="add"><img src="/images/common/btn_plus.svg" alt=""></a></div></td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
<div class="ok_field_box mar">
<div class="ok_field full">
<div class="th">테스터</div>
<div class="td">
<div class="table_scroll">
<table class="rtable sm w960">
<colgroup>
<col width="16%">
<col width="17%">
<col width="8%">
<col width="8%">
<col width="12%">
<col width="8%">
<col width="*">
<col width="6%">
</colgroup>
<tbody id="surgery">
<tr>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
<th>테스터</th>
</tr>
<tr><td><select class="gselect" name="cycapplyDisease"><option value="I2" selected="">테스터</option><option value="I7">테스터</option><option value="K5">테스터</option><option value="K6">테스터</option><option value="O0">테스터</option><option value="R0">테스터</option></select></td><td><select class="gselect" name="cycapplyIsclinic"><option value="Y" selected="">Y</option><option value="N">N</option></select></td><td><input type="text" class="ginput wfull" name="cycapplyNm" value="테스터"></td><td><input type="text" class="ginput wfull" name="cycapplyMjr" value="테스팅과"></td><td><input type="text" class="ginput wfull" name="cycapplyMjrDetail" value="테스팅과"></td><td><input type="text" class="ginput wfull" name="cycapplySurCnt" value="3"></td><td><input type="text" class="ginput wfull" name="cycapplyReason" value="null"></td><td><div class="mincenter"><a href="#" class="sur_add"><img src="/images/common/btn_plus.svg" alt=""></a></div></td></tr>
<tr><td><select class="gselect" name="cycapplyDisease"><option value="I2">응급혈관질환</option><option value="I7" selected="">급성대동맥증후군</option><option value="K5">소아급성복부질환
(만 12세 이하)</option><option value="K6">성인복부질환</option><option value="O0">산부인과응급질환</option><option value="R0">기관지출혈/이물질</option></select></td><td><select class="gselect" name="cycapplyIsclinic"><option value="Y" selected="">Y</option><option value="N">N</option></select></td><td><input type="text" class="ginput wfull" name="cycapplyNm" value="테스터"></td><td><input type="text" class="ginput wfull" name="cycapplyMjr" value="테스팅과"></td><td><input type="text" class="ginput wfull" name="cycapplyMjrDetail" value="테스팅과"></td><td><input type="text" class="ginput wfull" name="cycapplySurCnt" value="4"></td><td><input type="text" class="ginput wfull" name="cycapplyReason" value="null"></td><td><div class="mincenter"><a href="#" class="del"><img src="/images/common/btn_del.svg" alt=""></a></div></td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
<div class="ok_field_box mar">
<div class="ok_field full">
<div class="th"></div>
<div class="td">
<div class="table_scroll">
<table class="rtable sm w960">
<colgroup>
<col width="15%">
<col width="12%">
<col width="*">
<col width="45%">
</colgroup>
<tbody id="bankList">
<tr>
<th>은행명</th>
<th>예금주</th>
<th>계좌번호</th>
<th>통장사본 업로드</th>
</tr>
<tr><td><input type="text" class="ginput wfull" name="cycapplyBanknm" value=""></td><td><input type="text" class="ginput wfull" name="cycapplyOwnnm" value=""></td><td><input type="text" class="ginput wfull" name="cycapplyAccount" value=""></td><td><div class="file_list f2"><div class="btnin"><input id="accountFile" type="text" class="ginput wfull" readonly=""><div class="fileUpload btn btn-default btn-file jqx-widget jqx-widget-office jqx-widget-content jqx-widget-content-office jqx-rc-all jqx-rc-all-office jqx-file-upload jqx-file-upload-office" id="jqxWidget4b3ae98b" style="width: auto; height: auto;"><button id="jqxWidget4b3ae98bBrowseButton" class="jqx-file-upload-button-browse jqx-file-upload-button-browse-office jqx-rc-all jqx-rc-all-office jqx-button jqx-button-office jqx-widget jqx-widget-office jqx-fill-state-normal jqx-fill-state-normal-office" role="button" aria-disabled="false" style="width: auto;">파일찾기</button><div style="clear: both;"></div><div class="jqx-file-upload-buttons-container jqx-file-upload-buttons-container-office"><button id="jqxWidget4b3ae98bUploadButton" class="jqx-file-upload-button-upload jqx-file-upload-button-upload-office jqx-rc-all jqx-rc-all-office jqx-button jqx-button-office jqx-widget jqx-widget-office jqx-fill-state-normal jqx-fill-state-normal-office" role="button" aria-disabled="false" style="width: 90px;">Upload All</button><button id="jqxWidget4b3ae98bCancelButton" class="jqx-file-upload-button-cancel jqx-file-upload-button-cancel-office jqx-rc-all jqx-rc-all-office jqx-button jqx-button-office jqx-widget jqx-widget-office jqx-fill-state-normal jqx-fill-state-normal-office" role="button" aria-disabled="false" style="width: 90px;">Cancel All</button></div><div style="clear: both;"></div><iframe name="jqxWidget4b3ae98bIframe" class="jqx-file-upload-iframe jqx-file-upload-iframe-office" src=""></iframe><form class="jqx-file-upload-form jqx-file-upload-form-office" action="/component/board/boardFileUploadAjax.do" target="jqxWidget4b3ae98bIframe" method="post" enctype="multipart/form-data"><input type="file" class="jqx-file-upload-file-input jqx-file-upload-file-input-office"></form></div></div></div></td></tr>
</tbody></table>
</div>
</div>
</div>
</div>
<div class="ok_field_box">
<div class="ok_field textareapad">
<div class="th">첨부파일</div>
<div class="td">
<div class="btnin xsfull"><input type="text" class="ginput wfull" value=""><a href="#" class="fileUpload2 btn btn-default btn-file"></a></div>
<div class="file_list" id="file_list">
<div class="fl_cell" style="cursor:pointer;" data-id="22077">KakaoTalk.jpg<div class="file_div_delete"><button class="btn_delete" data-id="22077" type="button" onclick="boardFileDelete(this)">삭제</button></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn_area center">
<button type="button" class="btn-default btn-save save mar">저장</button>
<button type="button" class="btn-default btn-no">취소</button>
</div>
</div>
이런 구조입니다.
document.addEventListener("DOMContentLoaded", function () {
let printButton = document.querySelector(".btn-print");
if (!printButton) {
console.error("");
return;
}
printButton.addEventListener("click", function () {
window.print();
});
});
이런 js로 print창을 띄우면
화면에 가득 차지 않고 매우 작게 나옵니다.
@media print {
body * {
visibility: hidden;
}
.popup, .popup * {
visibility: visible !important;
}
.popup {
position: absolute !important;
left: 50% !important;
top: 0 !important;
transform: translateX(-50%) !important;
width: 210mm !important;
height: 297mm !important;
background: white !important;
padding: 10mm !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-shadow: none !important;
overflow: hidden !important;
}
@page {
size: A4;
margin: 0;
}
.popup table {
width: 100% !important;
border-collapse: collapse !important;
font-size: 14px !important;
}
.btn-print {
display: none !important;
}
}
@media print는 이렇게 짯는데 어떤 부분이 잘못되었을까요
항상 부족해서 질문하게 됩니다. ㅠ
잘 부탁드립니다 열심히 발전하겠습니다
답변 2
@media print 내의 .popup 클래스에 고정된 position과 width·height 사용 대신,
유연한 레이아웃(position: static, width: 100% 등)을 적용하시면~
>>> 아래는, 인쇄 시 팝업이 화면에 가득 차고
브라우저나 프린터 설정에 따라 자동으로 맞춤 인쇄되는 방안을 찾아봅니다.
＊.popup에 position: static !important;나 position: relative !important;를 적용하여,
절대 배치와 수평 이동(transform)을 제거.
＊.popup에 width: 100% !important; height: auto !important;를 설정해
브라우저가 용지 크기에 맞춰 최적의 비율로 인쇄할 수 있게 함.
＊body * { visibility: hidden; }와 같이 일괄 숨김 처리 후
.popup, .popup *만 visibility: visible !important;로 바꾸는 것은 인쇄용으로 종종 사용 됨.
-- .popup이 부모 요소의 영향을 받지 않도록
position: static이나 z-index를 적절히 조정해 주는 것이 중요 함.
＊필요시, "@ page 규칙"으로 용지 방향이나 여백을 세부적으로 조정 가능.
css를 인라인으로 html요소에 직접 style="" 해서 넣어보세요.
스타일시트를 인식못하는것으로 알고있습니다.