-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmake_form.html
139 lines (124 loc) · 7.2 KB
/
make_form.html
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Make Forms</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 구글웹폰트 font-family: 'Jua', sans-serif; font-family: 'Nanum Gothic', sans-serif; -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic:wght@800&display=swap" rel="stylesheet">
<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- w3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--html2canvas-->
<script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js"></script> <!--제이쿼리-->
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type = "text/javascript" src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<style>
.header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.font {
font-family: 'Nanum Gothic', sans-serif;
}
h1,h3,h4,h5,p{
font-family: 'Nanum Gothic', sans-serif;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-white border-bottom shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" href="#"><i class="fa fa-chevron-left" aria-hidden="true"></i>
</a><b class="navbar-brand">증명서 만들기</b>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">마이페이지</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5 mb-3 font" style="background-color: antiquewhite;" id="certification" >
<div class="p-5 m-3 " style="border: 3px solid #5F4C0B;">
<h5 class="mt-3">제 <span id="num">dfsf</span> 호</h5>
<h1 id="myname" class="text-center">자격증의 이름</h1>
<h4>성명 : 홍길동 </h4>
<h4 style="display:inline;">과정명 : </h4>
<h4 id="processName" style="display:inline;"></h4>
<input class="form-control w-50" id="processName_input" type="text" style="display:inline;" placeholder="과정명 입력" aria-label="default input example">
<button class="btn btn-dark " style="display:inline;" onclick="make()">수정</button>
<h4 >이수일자 : <span id="date"></span></h4>
<h4 style="display:inline;">주관 : </h4>
<h4 id="Organization" style="display:inline;"></h4>
<input class="form-control w-50" id="Organization_input" type="text" style="display:inline;" placeholder="주관 입력" aria-label="default input example">
<button class="btn btn-dark " style="display:inline;" onclick="make2()">수정</button>
<h4>교육장소 : <span id="issuer"></span></h4>
<h3 class="mt-5 text-center" id="content">내용을 입력해주세요</h3>
<input class="form-control w-75 mt-5" id="content_input" type="text" style="display:inline; " placeholder="내용 입력" aria-label="default input example">
<button class="btn btn-dark" style="display:inline;" onclick="make3()">수정</button>
<h4 class="mt-5 text-center" id="mintDate"></h4>
</div>
</div>
<div class="container text-center pb-5">
<button id="create_pdf" class="btn btn-dark mt-4" style="display:inline;" onclick="make3()">PDF로 저장하기</button>
<button class="btn btn-dark mt-4" style="display:inline;" onclick="make3()">내용 저장하기</button>
</div>
<script>
let obj ={
tokenId: "5464654-331231", // '고유'한 카드 번호
name: "교육이수증", // 자격증의 이름
num: "21326554657", // 자격증 no.
issuer: "서울특별시 금천구 서부샛길 606 가산 대성디폴리스 A동 27층", // 발행자의 주소
imgurl: "123123", // IPFS 자격증 발행 숫자
holder: "경기도 의정부시 민락동 123번지 456", // 소유자의 주소
date: "2020. 05. 13 - 2021. 03. 02" , // 행사 날짜
mintDate: "2021. 07. 13", // 발행 날짜
exchangable: true, // 교환 가능여부
authorized: true // 검증 된 발행자인가
}
document.getElementById("myname").innerHTML = obj.name;
document.getElementById("num").innerHTML = obj.num;
document.getElementById("date").innerHTML = obj.date;
document.getElementById("issuer").innerHTML = obj.issuer;
document.getElementById("mintDate").innerHTML = obj.mintDate;
function make() {
document.getElementById("processName").innerHTML = document.getElementById("processName_input").value;
}
function make2() {
document.getElementById("Organization").innerHTML = document.getElementById("Organization_input").value;
}
function make3() {
document.getElementById("content").innerHTML = document.getElementById("content_input").value;
}
</script>
<script>
$('#create_pdf').click(function() {
//pdf_wrap을 canvas객체로 변환
html2canvas($('#certification')[0]).then(function(canvas) {
var doc = new jsPDF('p', 'mm', 'a4'); //jspdf객체 생성
var imgData = canvas.toDataURL('image/png'); //캔버스를 이미지로 변환
doc.addImage(imgData, 'PNG', 0, 0); //이미지를 기반으로 pdf생성
doc.save('sample-file.pdf'); //pdf저장
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>