irongit
Sign inRegister
huncholanehuncholane/pdftohtmlPublic
pdftohtml/index.html
192 lines5.3 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) div {
90 display: none;
91 }
92 .tabs-container div:nth-child(2) div.active {
93 display: block;
94 }
95 .tabs-container div:nth-child(2) > * {
96 width: 100%;
97 }
98 </style>
99 </head>
100 <body>
101 <h1>PDF To HTML</h1>
102 <div id="dropzone">
103 Drop your files or
104 <button id="manual-upload-btn">Click to upload</button>
105 </div>
106
107 <div class="tabs-container">
108 <div>
109 <h4 class="active">PDF</h4>
110 <h4 class="disabled">HTML</h4>
111 </div>
112 <div>
113 <canvas class="active">Pdf File</canvas>
114 <div>Html File</div>
115 </div>
116 </div>
117
118 <script
119 src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
120 integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
121 crossorigin="anonymous"
122 ></script>
123 <script
124 src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
125 integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
126 crossorigin="anonymous"
127 referrerpolicy="no-referrer"
128 ></script>
129 <script>
130 var file, pdf;
131
132 function loadPdfPage(pageNumber) {
133 pdf.getPage(pageNumber).then(function (page) {
134 console.debug("Page loaded");
135 var scale = 2;
136 var viewport = page.getViewport({ scale });
137 var canvas = $("canvas")[0];
138 var context = canvas.getContext("2d");
139 canvas.height = viewport.height;
140 canvas.width = viewport.width;
141 var renderContext = {
142 canvasContext: context,
143 viewport: viewport,
144 };
145 var renderTask = page.render(renderContext);
146 renderTask.promise.then(function () {
147 console.debug("Page rendered");
148 });
149 });
150 }
151
152 function handleFile(e) {
153 file = e.target.files[0];
154 if (file.type !== "application/pdf") {
155 alert("Please upload a PDF file");
156 return;
157 }
158 $(".tabs-container h4:first-child").text(file.name);
159 $(".tabs-container h4:nth-child(2)").removeClass("disabled");
160 $(".tabs-container h4:nth-child(2)").text(
161 file.name.replace(".pdf", ".html")
162 );
163 console.log(file.name, file.name.replace(".pdf", ".html"));
164 console.debug(file);
165 var fileReader = new FileReader();
166 fileReader.onload = function () {
167 console.debug("PDF loading");
168 var pdfData = new Uint8Array(this.result);
169 var loadingTask = pdfjsLib.getDocument(pdfData);
170 loadingTask.promise.then(function (pdf_) {
171 pdf = pdf_;
172 loadPdfPage(1);
173 });
174 };
175 fileReader.readAsArrayBuffer(file);
176 }
177
178 function manualUpload(e) {
179 e.preventDefault();
180 const input = document.createElement("input");
181 input.type = "file";
182 input.accept = ".pdf";
183 input.onchange = handleFile;
184 input.click();
185 }
186
187 document.addEventListener("DOMContentLoaded", (event) => {
188 $("#manual-upload-btn").on("click", manualUpload);
189 });
190 </script>
191 </body>
192</html>