irongit
Sign inRegister
huncholanehuncholane/pdftohtmlPublic
pdftohtml/index.html
200 lines5.7 KBHTML
RawDownloadHistory
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>PDF To HTML</title>
7 <link
8 href="https://fonts.googleapis.com/css?family=Poppins"
9 rel="stylesheet"
10 />
11 <link
12 rel="shortcut icon"
13 href="https://mozilla.github.io/pdf.js/images/favicon.ico"
14 />
15 <style>
16 body {
17 all: unset;
18 background-color: rgb(35, 33, 33);
19 color: white;
20 font-family: "Poppins";
21 }
22
23 h1 {
24 text-align: center;
25 margin: 20px 0;
26 width: 100%;
27 }
28
29 /* Dropzone */
30 #dropzone {
31 border: 2px dashed #4d4b4b;
32 width: 80%;
33 margin: 0 auto;
34 text-align: center;
35 border-radius: 10px;
36 padding: 20px;
37 }
38 #dropzone button {
39 all: unset;
40 cursor: pointer;
41 color: rgb(164, 164, 236);
42 }
43 #dropzone button:hover {
44 color: rgb(255, 255, 255);
45 }
46
47 /* Tabs and Container */
48 .tabs-container {
49 width: 80%;
50 margin: 20px auto;
51 }
52 /* Tabs */
53 .tabs-container div:first-child {
54 display: flex;
55 }
56 .tabs-container div:first-child h4 {
57 width: 50%;
58 text-align: center;
59 cursor: pointer;
60 padding: 10px;
61 margin: 0;
62 }
63 .tabs-container div:first-child h4:hover {
64 background-color: #6c6767;
65 }
66 .tabs-container div:first-child h4 {
67 background-color: #4d4b4b;
68 border-bottom: 2px solid #6c6767;
69 }
70 .tabs-container div:first-child h4.active {
71 background-color: rgb(108, 103, 103);
72 }
73 .tabs-container div:first-child h4.disabled {
74 background-color: rgb(108, 103, 103, 0.5);
75 cursor: not-allowed;
76 }
77 .tabs-container div:first-child h4:first-child {
78 border-top-left-radius: 10px;
79 }
80 .tabs-container div:first-child h4:last-child {
81 border-top-right-radius: 10px;
82 }
83 /* Containers */
84 .tabs-container > div:nth-child(2) {
85 padding: 10px 40px;
86 border-radius: 0 0 10px 10px;
87 background-color: #4d4b4b;
88 }
89 .tabs-container div:nth-child(2) > * {
90 display: none;
91 width: 100%;
92 }
93 .tabs-container div:nth-child(2) > *.active {
94 display: block;
95 }
96 </style>
97 </head>
98 <body>
99 <h1>PDF To HTML</h1>
100 <div id="dropzone">
101 Drop your files or
102 <button id="manual-upload-btn">Click to upload</button>
103 </div>
104
105 <div class="tabs-container">
106 <div>
107 <h4 class="active">PDF</h4>
108 <h4 class="disabled">HTML</h4>
109 </div>
110 <div>
111 <canvas class="active">Pdf File</canvas>
112 <div>Html File</div>
113 </div>
114 </div>
115
116 <script
117 src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
118 integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
119 crossorigin="anonymous"
120 ></script>
121 <script
122 src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
123 integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
124 crossorigin="anonymous"
125 referrerpolicy="no-referrer"
126 ></script>
127 <script>
128 var file, pdf;
129
130 function loadPdfPage(pageNumber) {
131 pdf.getPage(pageNumber).then(function (page) {
132 console.debug("Page loaded");
133 var scale = 2;
134 var viewport = page.getViewport({ scale });
135 var canvas = $("canvas")[0];
136 var context = canvas.getContext("2d");
137 canvas.height = viewport.height;
138 canvas.width = viewport.width;
139 var renderContext = {
140 canvasContext: context,
141 viewport: viewport,
142 };
143 var renderTask = page.render(renderContext);
144 renderTask.promise.then(function () {
145 console.debug("Page rendered");
146 });
147 });
148 }
149
150 function handleFile(e) {
151 file = e.target.files[0];
152 if (file.type !== "application/pdf") {
153 alert("Please upload a PDF file");
154 return;
155 }
156 $(".tabs-container h4:first-child").text(file.name);
157 $(".tabs-container h4:nth-child(2)").removeClass("disabled");
158 $(".tabs-container h4:nth-child(2)").text(
159 file.name.replace(".pdf", ".html")
160 );
161 console.log(file.name, file.name.replace(".pdf", ".html"));
162 console.debug(file);
163 var fileReader = new FileReader();
164 fileReader.onload = function () {
165 console.debug("PDF loading");
166 var pdfData = new Uint8Array(this.result);
167 var loadingTask = pdfjsLib.getDocument(pdfData);
168 loadingTask.promise.then(function (pdf_) {
169 pdf = pdf_;
170 loadPdfPage(1);
171 });
172 };
173 fileReader.readAsArrayBuffer(file);
174 }
175
176 function manualUpload(e) {
177 e.preventDefault();
178 const input = document.createElement("input");
179 input.type = "file";
180 input.accept = ".pdf";
181 input.onchange = handleFile;
182 input.click();
183 }
184
185 function selectTab(e) {
186 $(".tabs-container div:first-child h4").removeClass("active");
187 $(e.target).addClass("active");
188 $(".tabs-container div:nth-child(2) > *").removeClass("active");
189 $(".tabs-container div:nth-child(2) > *")
190 .eq($(e.target).index())
191 .addClass("active");
192 }
193
194 document.addEventListener("DOMContentLoaded", (event) => {
195 $("#manual-upload-btn").on("click", manualUpload);
196 $(".tabs-container div:first-child h4").on("click", selectTab);
197 });
198 </script>
199 </body>
200</html>