{"id":3114,"date":"2023-03-06T09:26:56","date_gmt":"2023-03-06T09:26:56","guid":{"rendered":"https:\/\/www.toolkit.keywordfinder.us\/?page_id=3114"},"modified":"2023-03-06T09:26:56","modified_gmt":"2023-03-06T09:26:56","slug":"pdf-reader","status":"publish","type":"page","link":"https:\/\/tools.billionsideas.com\/es\/pdf-reader\/","title":{"rendered":"PDF Reader"},"content":{"rendered":"<section><h1>PDF Reader<\/h1>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.2.2\/pdf.js\"><\/script>\n<input type=\"file\" id=\"pdf-upload\" accept=\"application\/pdf\" \/><br\/><br\/>\n<button id=\"zoom-in\">Click To Zoom In<\/button><br\/>\n<div id=\"zoom-percent\">60<\/div>\n<button id=\"zoom-out\">Click To Zoom Out<\/button>\n<button id=\"zoom-reset\">Reset Zoom<\/button>\n<div id=\"pages\"><\/div><\/section>\n<style>\ncanvas{width:100%;}\nsection{\n         margin-top:60px;\n        width: 100%;\n        max-width: 970px;\n        background-color: #fff;\n        border: 1px solid #ddd;\n        padding: 25px;\n      }\n<\/style>\n\n<script>\npdfjsLib.GlobalWorkerOptions.workerSrc =\n    'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.2.2\/pdf.worker.js';\n\ndocument.querySelector(\"#pdf-upload\").addEventListener(\"change\", function(e){\n  document.querySelector(\"#pages\").innerHTML = \"\";\n  zoomReset();\n\tvar file = e.target.files[0]\n\tif(file.type != \"application\/pdf\"){\n\t\talert(file.name + \" is not a pdf file.\")\n\t\treturn\n\t}\n\t\n\tvar fileReader = new FileReader();  \n\n\tfileReader.onload = function() {\n\t\tvar typedarray = new Uint8Array(this.result);\n\n\t\tpdfjsLib.getDocument(typedarray).promise.then(function(pdf) {\n\t\t\t\/\/ you can now use *pdf* here\n\t\t\tconsole.log(\"the pdf has\", pdf.numPages, \"page(s).\");\n      for (var i = 0; i < pdf.numPages; i++) {\n        (function(pageNum){\n        pdf.getPage(i+1).then(function(page) {\n          \/\/ you can now use *page* here\n          var viewport = page.getViewport(2.0);\n          var pageNumDiv = document.createElement(\"div\");\n          pageNumDiv.className = \"pageNumber\";\n          pageNumDiv.innerHTML = \"Page \" + pageNum;\n          var canvas = document.createElement(\"canvas\");\n          canvas.className = \"page\";\n          canvas.title = \"Page \" + pageNum;\n          document.querySelector(\"#pages\").appendChild(pageNumDiv);\n          document.querySelector(\"#pages\").appendChild(canvas);\n          canvas.height = viewport.height;\n          canvas.width = viewport.width;\n\n\n          page.render({\n            canvasContext: canvas.getContext('2d'),\n            viewport: viewport\n          }).promise.then(function(){\n            console.log('Page rendered');\n          });\n          page.getTextContent().then(function(text){\n              console.log(text);\n          });\n        });\n        })(i+1);\n      }\n\n\t\t});\n\t};\n\n\tfileReader.readAsArrayBuffer(file);\n});\n\nvar curWidth = 60;\nfunction zoomIn(){\n    if (curWidth < 150) {\n        curWidth += 10;\n        document.querySelector(\"#zoom-percent\").innerHTML = curWidth;\n        document.querySelectorAll(\".page\").forEach(function(page){\n\n            page.style.width = curWidth + \"%\";\n        });\n    }\n}\nfunction zoomOut(){\n    if (curWidth > 20) {\n        curWidth -= 10;\n        document.querySelector(\"#zoom-percent\").innerHTML = curWidth;\n        document.querySelectorAll(\".page\").forEach(function(page){\n\n            page.style.width = curWidth + \"%\";\n        });\n    }\n}\nfunction zoomReset(){\n    curWidth = 60;\n    document.querySelector(\"#zoom-percent\").innerHTML = curWidth;\n    document.querySelectorAll(\".page\").forEach(function(page){\n\n      page.style.width = curWidth + \"%\";\n    });\n}\ndocument.querySelector(\"#zoom-in\").onclick = zoomIn;\ndocument.querySelector(\"#zoom-out\").onclick = zoomOut;\ndocument.querySelector(\"#zoom-reset\").onclick = zoomReset;\nwindow.onkeypress = function(e){\n    if (e.code == \"Equal\") {\n        zoomIn();\n    }\n    if (e.code == \"Minus\") {\n        zoomOut();\n    }\n};\n<\/script>","protected":false},"excerpt":{"rendered":"<p>PDF Reader Click To Zoom In 60 Click To Zoom Out Reset Zoom<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","footnotes":""},"class_list":["post-3114","page","type-page","status-publish"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"Billions Ideas","author_link":"https:\/\/tools.billionsideas.com\/es\/author\/loginbillionsideas-com\/"},"comment_info":0,"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages\/3114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/comments?post=3114"}],"version-history":[{"count":0,"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/pages\/3114\/revisions"}],"wp:attachment":[{"href":"https:\/\/tools.billionsideas.com\/es\/wp-json\/wp\/v2\/media?parent=3114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}