Notice
Recent Posts
Recent Comments
Tags more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[Javascript] jquery 현재 문서 그대로 PDF 파일 생성하기 본문

javascript

[Javascript] jquery 현재 문서 그대로 PDF 파일 생성하기

http://portfolio.wonpaper.net 2023. 4. 30. 07:38

html 문서형태로 동의함이 있는 다양한 checkbox 가 있는 웹페이지를 간단히 PDF 파일로 그대로 생성할때 아주 유용한 간단한 소스를 정리하였다.

 

PDF 파일 저장하기 버튼을 누르면

현재시간을 파일명으로 만드는  pdf  파일이 계속 생성되도록 만들었다.

 

pdf 파일을 클릭하여 살펴보면

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
 
<style type="text/css">
.hidden {
  display: none;
}
.my-custom-label {
  padding-left: 24px;
  position: relative;
}
.my-custom-label input:checked + span {
   text-indent: 0;
}
.my-custom-label span {
  position: absolute;
  top: 50%;
  margin-top: -6.5px;
  left: 0;
  width: 18px;
  height: 18px;
  background: white;
  border: 1px solid grey;
  text-indent: 100px;
  overflow: hidden;
}
 
</style>
 </head>
 <body>
 
  <label for="my-checkbox" class="my-custom-label">
  약관에 동의합니다.
  <input type="checkbox" id="my-checkbox" class="hidden" />
  <span>&check;</span>
  </label>
 
<br><br>
 
<input type="text" name="name" value="홍길동" class="box">
 
<br><br>
<button id="save">PDF파일 저장하기</button>
 
<script>
$("#save").on("click", function(){
    // PDF 파일 만들기 
    let today = new Date();   
    let year = today.getFullYear(); // 년도
    let month = today.getMonth() + 1;  // 월
    let date = today.getDate();  // 날짜
    let day = today.getDay();  // 요일
    let hours = today.getHours(); // 시
    let minutes = today.getMinutes();  // 분
    let seconds = today.getSeconds();  // 초
    let milliseconds = today.getMilliseconds(); // 밀리
 
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;
 
 
    var fileName = year + "-" + month+ "-" +date + "_" + hours + minutes + seconds + milliseconds;
    fileName = fileName + ".pdf";
 
    const doc = new jsPDF({
      //orientation: "landscape",
      orientation: "portrait",
      format: "a4"
    });
     
    // 로컬컴퓨터에 파일로 저장
    doc.addHTML(document.body,function() {
        doc.save(fileName);
    });
});
</script>
 
 </body>
</html>
 cs

 

참고 : https://stackoverflow.com/questions/70273192/why-my-html-checkbox-get-print-in-in-grey-color-in-pdf-file

참고 : https://doolyit.tistory.com/222

참고 : https://jsfiddle.net/z34x0vfs/

 

 

'javascript' 카테고리의 다른 글

[Javascript] 모바일인지 pc인치 체크하기  (0) 2023.08.09
[Javascript] getElementsByClassName 사용시 주의점  (1) 2023.08.01
[Javascript] jquery 서명하고 이미지 저장하기  (0) 2023.04.22
[javascript] a태그 클릭시 위로 이동되는 현상 방지  (0) 2023.01.16
[javascript] 동영상 재생 관련 사용법 - HTML5 Video 태그  (0) 2022.11.30
'javascript' Related Articles more
Comments