huncholane/pdftohtmlPublic

'able to present pdf'

huncholaneauthored 1 year ago

parent 45dba4bcommit 0dcdf466d9bc3f4104df6224bc65317b1fdb0a21Browse files

2 files changed, +90 -14

+0-0f1099msc.pdf

Binary file changed.

+90-14index.html

		@@ -8,6 +8,10 @@
8	8	href="https://fonts.googleapis.com/css?family=Poppins"
9	9	rel="stylesheet"
10	10	/>
	11	+ <link
	12	+ rel="shortcut icon"
	13	+ href="https://mozilla.github.io/pdf.js/images/favicon.ico"
	14	+ />
11	15	<style>
12	16	body {
13	17	all: unset;
		@@ -18,7 +22,7 @@
18	22
19	23	h1 {
20	24	text-align: center;
21		- margin: 20px;
	25	+ margin: 20px 0;
22	26	width: 100%;
23	27	}
24	28
		@@ -43,9 +47,9 @@
43	47	/* Tabs and Container */
44	48	.tabs-container {
45	49	width: 80%;
46		- margin: 0 auto;
47		- margin-top: 20px;
	50	+ margin: 20px auto;
48	51	}
	52	+ /* Tabs */
49	53	.tabs-container div:first-child {
50	54	display: flex;
51	55	}
		@@ -64,7 +68,11 @@
64	68	border-bottom: 2px solid #6c6767;
65	69	}
66	70	.tabs-container div:first-child h4.active {
67		- background-color: #6c6767;
	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;
68	76	}
69	77	.tabs-container div:first-child h4:first-child {
70	78	border-top-left-radius: 10px;
		@@ -72,8 +80,9 @@
72	80	.tabs-container div:first-child h4:last-child {
73	81	border-top-right-radius: 10px;
74	82	}
75		- .tabs-container div:last-child {
76		- padding: 10px;
	83	+ /* Containers */
	84	+ .tabs-container div:nth-child(2) {
	85	+ padding: 10px 40px;
77	86	border-radius: 0 0 10px 10px;
78	87	background-color: #4d4b4b;
79	88	}
		@@ -83,33 +92,100 @@
83	92	.tabs-container div:nth-child(2) div.active {
84	93	display: block;
85	94	}
	95	+ .tabs-container div:nth-child(2) > * {
	96	+ width: 100%;
	97	+ }
86	98	</style>
87	99	</head>
88	100	<body>
89	101	<h1>PDF To HTML</h1>
90	102	<div id="dropzone">
91		- Drop your files or <button id="manual-upload-btn">Click to upload</button>
	103	+ Drop your files or
	104	+ <button id="manual-upload-btn">Click to upload</button>
92	105	</div>
93	106
94	107	<div class="tabs-container">
95	108	<div>
96	109	<h4 class="active">PDF</h4>
97		- <h4>HTML</h4>
	110	+ <h4 class="disabled">HTML</h4>
98	111	</div>
99	112	<div>
100		- <div class="active">Pdf File</div>
	113	+ <canvas class="active">Pdf File</canvas>
101	114	<div>Html File</div>
102	115	</div>
103	116	</div>
104	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>
105	129	<script>
106		- function manualUpload(e) {}
	130	+ var file, pdf;
107	131
108		- document.addEventListener("DOMContentLoaded", (event) => {
109		- const dropzone = document.getElementById("dropzone");
110		- const manualUploadBtn = document.getElementById("manual-upload-btn");
	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	+ }
111	177
112		- manualUploadBtn.add;
	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);
113	189	});
114	190	</script>
115	191	</body>