----------------------------------- <!DOCTYPE html> <html> <head> <title>PDF Viewer</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script> </head> <body> <label for="pdf-upload">Upload PDF:</label> <input type="file" id="pdf-upload" accept="application/pdf"/> <label for="pdf-url">PDF URL:</label> <input type="text" id="pdf-url" placeholder="Enter PDF URL"/> <button id="load-pdf">Load PDF</button> <button id="zoom-in" style="background:transparent; border:transparent;display: none;">Zoom In</button> <div id="zoom-percent" style="background:transparent; border:transparent;display: none;">60</div> <button id="zoom-out" style="background:transparent; border:transparent;display: none;">Zoom Out</button> <button id="zoom-reset" style="background:transparent; border:transparent;display: none;">Reset Zoom</button> <div id="pages"></div> <script> pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js'; document.querySelector("#pdf-upload").addEventListener("change", function(e){ document.querySelector("#pages").innerHTML = ""; zoomReset(); var file = e.target.files[0] if(file.type != "application/pdf"){ alert(file.name + " is not a pdf file.") return } var fileReader = new FileReader(); fileReader.onload = function() { var typedarray = new Uint8Array(this.result); pdfjsLib.getDocument(typedarray).promise.then(function(pdf) { // you can now use *pdf* here console.log("the pdf has", pdf.numPages, "page(s)."); for (var i = 0; i < pdf.numPages; i++) { (function(pageNum){ pdf.getPage(i+1).then(function(page) { // you can now use *page* here var viewport = page.getViewport(2.0); var pageNumDiv = document.createElement("div"); pageNumDiv.className = "pageNumber"; pageNumDiv.innerHTML = "Page " + pageNum; var canvas = document.createElement("canvas"); canvas.className = "page"; canvas.title = "Page " + pageNum; document.querySelector("#pages").appendChild(pageNumDiv); document.querySelector("#pages").appendChild(canvas); canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport }).promise.then(function(){ console.log('Page rendered'); }); page.getTextContent().then(function(text){ console.log(text); }); }); })(i+1); } }); }; fileReader.readAsArrayBuffer(file); }); document.querySelector("#load-pdf").addEventListener("click", function(){ document.querySelector("#pages").innerHTML = ""; zoomReset(); var url = document.querySelector("#pdf-url").value.trim(); if (!url) { alert("Please enter a PDF URL."); return; } if (!url.endsWith(".pdf")) { alert("Please enter a valid PDF URL."); return; } fetch(url).then(function(response) { if (!response.ok) { throw new Error(response.statusText); } return response.arrayBuffer(); }).then(function(buffer) { pdfjsLib.getDocument(buffer).promise.then(function(pdf) { // you can now use *pdf* here console.log("the pdf has", pdf.numPages, "page(s)."); for (var i = 0; i < pdf.numPages; i++) { (function(pageNum){ pdf.getPage(i+1).then(function(page) { // you can now use *page* here var viewport = page.getViewport(2.0); var pageNumDiv = document.createElement("div"); pageNumDiv.className = "pageNumber"; pageNumDiv.innerHTML = "Page " + pageNum; var canvas = document.createElement("canvas"); canvas.className = "page"; canvas.title = "Page " + pageNum; document.querySelector("#pages").appendChild(pageNumDiv); document.querySelector("#pages").appendChild(canvas); canvas.height = viewport.height; canvas.width = viewport.width; page.render({ canvasContext: canvas.getContext('2d'), viewport: viewport }).promise.then(function(){ console.log('Page rendered'); }); page.getTextContent().then(function(text){ console.log(text); }); }); })(i+1); } }); }).catch(function(error) { alert("Failed to load PDF: " + error.message); }); }); var curWidth = 60; function zoomIn(){ if (curWidth < 150) { curWidth += 10; document.querySelector("#zoom-percent").innerHTML = curWidth; document.querySelectorAll(".page").forEach(function(page){ page.style.width = curWidth + "%"; }); } } function zoomOut(){ if (curWidth > 20) { curWidth -= 10; document.querySelector("#zoom-percent").innerHTML = curWidth; document.querySelectorAll(".page").forEach(function(page){ page.style.width = curWidth + "%"; }); } } function zoomReset(){ curWidth = 60; document.querySelector("#zoom-percent").innerHTML = curWidth; document.querySelectorAll(".page").forEach(function(page){ page.style.width = curWidth + "%"; }); } document.querySelector("#zoom-in").onclick = zoomIn; document.querySelector("#zoom-out").onclick = zoomOut; document.querySelector("#zoom-reset").onclick = zoomReset; window.onkeypress = function(e){ if (e.code == "Equal") { zoomIn(); } if (e.code == "Minus") { zoomOut(); } }; </script> </body> </html> https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/pdffilerender.html https://codepen.io/ryedai1/full/KKGYemE </plaintext>