Javascript: PDF tonen in PDFjs

Date: 2016-10-19 
<!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;

var getPages = function(pageRangeStr) {
 var pages = [];
 var rangeStr = pageRangeStr.replace(/\s/g, ''); // remove all whitespace
 rangeStr.split(',').forEach(function(r) {
 var s = r.split('-');
 var f, t; 
 if (s.length == 1) {
 f = parseInt(s[0]);
 pages.push(f);
 } else if (s.length == 2) {
 f = parseInt(s[0]);
 t = parseInt(s[1]);
 var x = f;
 while(x <= t) {
 pages.push(x);
 x += 1;
 }
 }
 });
 return pages;
};

var calculateSizeToFit = function (target, current){
 var ratioX = target[0] / current[0];
 var ratioY = target[1] / current[1];
 var ratio = Math.min(ratioX, ratioY);

 var newWidth = Math.floor(current[0] * ratio);
 var newHeight = Math.floor(current[1] * ratio);
 
 var centerX = Math.floor((target[0] - newWidth) / 2);
 var centerY = Math.floor((target[1] - newHeight) / 2);
 
 return { 
 size: [newWidth, newHeight],
 center: [centerX, centerY] 
 };
}; 
 
var currPageIndex = 0;
var pages = getPages(pdfPages);
var thePDF = null;

//This is where you start
PDFJS.getDocument(pdfUrl).then(function(pdf) {
 //Set PDFJS global object (so we can easily access in our page functions
 thePDF = pdf;

 //How many pages it has
 //numPages = pdf.numPages;

 //Start with first page
 pdf.getPage( pages[currPageIndex] ).then( handlePages );
});

function handlePages(page)
{
 //This gives us the page's dimensions at full scale
 
 var scale = pdfScale;
 var viewport = page.getViewport( scale );

 //We'll create a canvas for each page to draw it on
 var canvas = document.createElement( "canvas" ); 
 var context = canvas.getContext('2d');
 canvas.width = viewport.width;
 canvas.height = viewport.height;
 
 var w = window.innerWidth / 1.1;
 var h = window.innerHeight / 1.1;
 
 var t = calculateSizeToFit([w,h], [canvas.width, canvas.height]); 
 canvas.style.opacity = 0.0;
 canvas.style.width = t.size[0] + 'px';
 canvas.style.height = t.size[1] + 'px';
 

 //Draw it on the canvas
 page.render({ canvasContext: context, viewport: viewport }).then(function() { 
 var tl = new TimelineMax();
 tl.to(canvas, 0, {rotationY: 90, opacity:1, transformStyle:'preserve-3d', transformPerspective: 1200, transformOrigin:'0% center 50'});
 tl.to(canvas, 0.4, {rotationY: 0, opacity:1});
 tl.play(); 
 });

 //Add it to the web page
 document.body.appendChild( canvas );

 //Move to next page
 currPageIndex++; 
 if ( thePDF !== null && pages[currPageIndex])
 {
 setTimeout(function() {
 thePDF.getPage( pages[currPageIndex] ).then( handlePages );
 }, 300);
 }
}

 </script>
</body>
</html>
4650cookie-checkJavascript: PDF tonen in PDFjs