특정 영역을 프린트 하기
브라우저의 전체 페이지가 아닌 특정 영역만을 프린트하고 싶을때 사용되는 방법으로 특정 영역을 복사하여 팝업으로 띄운 다음 프린트 하는 것이다.
/** 프린트 버튼 클릭 시 이벤트 */
$("#print").click(function () {
let $container = $("#container").clone() // 프린트 할 특정 영역 복사
let cssText = "" // 스타일 복사
for (const node of $("style")) {
cssText += node.innerHTML
}
/** 팝업 */
let innerHtml = $container[0].innerHTML
let popupWindow = window.open("", "_blank", "width=700,height=800")
popupWindow.document.write("<!DOCTYPE html>"+
"<html>"+
"<head>"+
"<style>"+cssText+"</style>"+
"</head>"+
"<body>"+innerHtml+"</body>"+
"</html>")
popupWindow.document.close()
popupWindow.focus()
/** 1초 지연 */
setTimeout(() => {
popupWindow.print() // 팝업의 프린트 도구 시작
popupWindow.close() // 프린트 도구 닫혔을 경우 팝업 닫기
}, 1000)
})'Javascript > jQuery' 카테고리의 다른 글
| [jquery-loading] 아주 간단하고 깔끔한 jquery 로딩 플러그인을 소개합니다. (1) | 2017.02.26 |
|---|---|
| [jQuery 플러그인] "jQuery oLoader" 간단하게 로딩(Loading) 구현하기 (0) | 2015.10.12 |
| [jQuery 함수] has() 특정 element를 자식으로 가지고 있는 dom element 선택하기 (0) | 2015.07.27 |
| [jQuery 함수] $.trim() 문자열 공백 제거하기 (0) | 2015.07.27 |
| [jQuery 함수] clone() dom element 복사하기! (0) | 2015.07.27 |