개발자 유튜브를 운영중입니다. 구독 부탁드립니다.
리코딩 ReCoding
PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다.
www.youtube.com
인쇄할 버튼을 만들고 버튼을 클릭하면 인쇄가 되도록 구현하였다.
#첫번째시도
window.print() => header 부분을 비롯하여 모바일에서 설정된 영역까지 인쇄된다. 문제가 심각하다. 영역을 설정해서 인쇄하는 방법을 찾기 시작했다.
#두번째시도
0. document.body를 따로 저장해둔다.
1. 인쇄할 영역을 querySelector로 잡는다.
2. 인쇄하지 않을 영역을 querySelector로 잡는다.
3. 인쇄하지 않을 영역을 display = "none" 처리한다.
4. 인쇄할 영역을 document.body로 저장한다.
5. 인쇄한다.
6. 인쇄하고나서 인쇄하지 않았던 영역을 display = "block" 처리한다.
7. document.body를 다시 원상 복구한다.
8. 끝
이하 코드 전문
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// Print Report
function info_print() {
let initBody = document.body;
let hiddenBtn = document.querySelector('.print-button');
let hiddenHeader = document.querySelector('#header');
let hiddenNavbar = document.querySelector('.navbar-device');
let hiddenClearfix = document.querySelector('.clearfix');
window.onbeforeprint = function () {
hiddenBtn.style.display = "none";
hiddenHeader.style.display = "none";
hiddenNavbar.style.display = "none";
hiddenClearfix.style.display = "none";
document.body = document.querySelector('.main-container');
}
window.onafterprint = function () {
hiddenBtn.style.display = "block";
hiddenHeader.style.display = "block";
hiddenNavbar.style.display = "block";
hiddenClearfix.style.display = "block";
document.body = initBody;
}
window.print();
}
|
개발자 유튜브를 운영중입니다. 구독 부탁드립니다.
리코딩 ReCoding
PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다.
www.youtube.com
'Javascript > Basic' 카테고리의 다른 글
[javascript] typeof, instanceof 설명 (0) | 2021.01.26 |
---|---|
ECMAscript != Javascript (0) | 2021.01.14 |
[Javascript] 화살표 함수 간략 설명 (0) | 2021.01.13 |
php 와 javascript 차이 & 상호 간의 호출 방법 (0) | 2020.11.20 |
addEventListener 이벤트리스너 종류 (0) | 2020.10.23 |
내장함수 built in Function (0) | 2020.08.16 |
Map, Reduce, Filter : Javascript (0) | 2020.08.13 |
댓글