{"id":465,"date":"2016-10-19T10:31:28","date_gmt":"2016-10-19T09:31:28","guid":{"rendered":"https:\/\/solidt.eu\/blog\/?p=465"},"modified":"2022-07-25T08:35:45","modified_gmt":"2022-07-25T07:35:45","slug":"javascript-pdf-tonen-in-pdfjs","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/javascript-pdf-tonen-in-pdfjs\/","title":{"rendered":"Javascript: PDF tonen in PDFjs"},"content":{"rendered":"
<!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <title><\/title>\r\n <meta name=\"description\" content=\"\">\r\n <meta name=\"author\" content=\"\">\r\n <style>\r\n html, body {\r\n margin:0;\r\n padding:0;\r\n \/*text-align:center;*\/\r\n }\r\n \r\n canvas {\r\n margin:10px;\r\n border: 1px solid #555;\r\n box-shadow: 3px 3px 3px #333;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <script src=\"TweenMax.min.js\"><\/script>\r\n <script src=\"pdf.js\"><\/script>\r\n <script> \r\nvar pdfUrl = 'Script_Install.pdf';\r\nvar pdfPages = '1,3';\r\nvar pdfScale = 2;\r\n\r\nvar getPages = function(pageRangeStr) {\r\n var pages = [];\r\n var rangeStr = pageRangeStr.replace(\/\\s\/g, ''); \/\/ remove all whitespace\r\n rangeStr.split(',').forEach(function(r) {\r\n var s = r.split('-');\r\n var f, t; \r\n if (s.length == 1) {\r\n f = parseInt(s[0]);\r\n pages.push(f);\r\n } else if (s.length == 2) {\r\n f = parseInt(s[0]);\r\n t = parseInt(s[1]);\r\n var x = f;\r\n while(x <= t) {\r\n pages.push(x);\r\n x += 1;\r\n }\r\n }\r\n });\r\n return pages;\r\n};\r\n\r\nvar calculateSizeToFit = function (target, current){\r\n var ratioX = target[0] \/ current[0];\r\n var ratioY = target[1] \/ current[1];\r\n var ratio = Math.min(ratioX, ratioY);\r\n\r\n var newWidth = Math.floor(current[0] * ratio);\r\n var newHeight = Math.floor(current[1] * ratio);\r\n \r\n var centerX = Math.floor((target[0] - newWidth) \/ 2);\r\n var centerY = Math.floor((target[1] - newHeight) \/ 2);\r\n \r\n return { \r\n size: [newWidth, newHeight],\r\n center: [centerX, centerY] \r\n };\r\n}; \r\n \r\nvar currPageIndex = 0;\r\nvar pages = getPages(pdfPages);\r\nvar thePDF = null;\r\n\r\n\/\/This is where you start\r\nPDFJS.getDocument(pdfUrl).then(function(pdf) {\r\n \/\/Set PDFJS global object (so we can easily access in our page functions\r\n thePDF = pdf;\r\n\r\n \/\/How many pages it has\r\n \/\/numPages = pdf.numPages;\r\n\r\n \/\/Start with first page\r\n pdf.getPage( pages[currPageIndex] ).then( handlePages );\r\n});\r\n\r\nfunction handlePages(page)\r\n{\r\n \/\/This gives us the page's dimensions at full scale\r\n \r\n var scale = pdfScale;\r\n var viewport = page.getViewport( scale );\r\n\r\n \/\/We'll create a canvas for each page to draw it on\r\n var canvas = document.createElement( \"canvas\" ); \r\n var context = canvas.getContext('2d');\r\n canvas.width = viewport.width;\r\n canvas.height = viewport.height;\r\n \r\n var w = window.innerWidth \/ 1.1;\r\n var h = window.innerHeight \/ 1.1;\r\n \r\n var t = calculateSizeToFit([w,h], [canvas.width, canvas.height]); \r\n canvas.style.opacity = 0.0;\r\n canvas.style.width = t.size[0] + 'px';\r\n canvas.style.height = t.size[1] + 'px';\r\n \r\n\r\n \/\/Draw it on the canvas\r\n page.render({ canvasContext: context, viewport: viewport }).then(function() { \r\n var tl = new TimelineMax();\r\n tl.to(canvas, 0, {rotationY: 90, opacity:1, transformStyle:'preserve-3d', transformPerspective: 1200, transformOrigin:'0% center 50'});\r\n tl.to(canvas, 0.4, {rotationY: 0, opacity:1});\r\n tl.play(); \r\n });\r\n\r\n \/\/Add it to the web page\r\n document.body.appendChild( canvas );\r\n\r\n \/\/Move to next page\r\n currPageIndex++; \r\n if ( thePDF !== null && pages[currPageIndex])\r\n {\r\n setTimeout(function() {\r\n thePDF.getPage( pages[currPageIndex] ).then( handlePages );\r\n }, 300);\r\n }\r\n}\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
<!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title><\/title> <meta name=”description” content=””> <meta name=”author” content=””> <style> html, body { margin:0; padding:0; \/*text-align:center;*\/ } canvas { margin:10px; border: 1px solid #555; box-shadow: 3px 3px 3px #333; } <\/style> <\/head> <body> <script src=”TweenMax.min.js”><\/script> <script src=”pdf.js”><\/script> <script> var pdfUrl = ‘Script_Install.pdf’; var pdfPages = ‘1,3’; var pdfScale = 2; […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5,4],"tags":[],"class_list":["post-465","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=465"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/465\/revisions"}],"predecessor-version":[{"id":667,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/465\/revisions\/667"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}