728x90
오늘의 블로그 글은 JQuery를 활용해 특정 영역을 프린트하는 기능을 소개할 것이다. 우선 소스 코드를 확인해보자.
[ Javascript Code ] [JQuery]
function printWindow() {
$('#headerWrap').hide();
$('.big-title').hide();
$(".tabcontents").css('border', '0px');
$("#container").css('width', 'auto');
$('link[rel=stylesheet][href~="href주소입력"]').remove();
setTimeout(function () {
window.focus();
window.print();
$('#headerWrap').show();
$('.big-title').show();
$(".tabcontents").css('border', '1px solid #ccc');
$("#container").css('width', '980px');
var link1 = document.createElement('link');
link1.rel = 'stylesheet';
link1.href = 'href주소 입력';
document.head.appendChild(link1);
}, 500);
}[HTML Code]
<body>
<button onclick="printWindow()">Print</button>
</body>소스의 순서를 크게 구분하자면
1. OnClick을 사용해 Javascript Function 호출
2. 불필요한 Div영역 Hide();
3. 필요에 맞게 CSS 수정 (불필요한 CSS제거 및 Link로 호출한 CSS파일 제거 가능)
4. Timeout(500) 을 걸어 Hide할 시간을 준 후 window.print(); 함수 사용
5. CSS 원상 복구하기
예전에 다른 방법([URL], HTML 자르는 방식)으로 공부해 보았지만, 이 방식에는 치명적인 단점이 있어서 jQuery를 사용하는 것이 더 좋다고 판단했다. HTML을 자르는 방식을 사용할 경우, 삭제 후 다시 호출하는 방식이기 때문에 <iframe> 태그의 경우 두 번 호출하게 되어 불필요한 데이터 사용과 시간 지연이 발생한다. jQuery의 Hide 기능을 사용함으로써 잠시 <iframe> 태그를 숨기는 것으로 불필요하게 두 번 호출하는 것을 방지하자.
728x90
반응형
'👨💻 프로그래밍 > Javascript' 카테고리의 다른 글
| [Javascript] HTML Input Text 숫자만 입력하기 (0) | 2024.02.07 |
|---|---|
| [Javascript] 팝업 띄우기 (window.open) 및 파라미터 파싱 (0) | 2024.02.05 |
| [JavaScript] 특정 영역 내용 출력(인쇄/프린트)하기 (0) | 2024.01.31 |
