<html>
<head>
<title>Simple pdf.js page viewer</title>
<script type="text/javascript"
src="pdf.js"></script>
<style type"text/css">
body {
margin: 6px;
padding: 0px;
background-color: #c0bdb7;
}
#viewer {
margin: auto;
border: 1px solid black;
width: 8.5in;
height: 11in;
}
#pageNumber {
text-align: right;
}
</style>
<script type="text/javascript">
var canvas, numPages, pageDisplay, pageNum;
function load() {
canvas = document.getElementById("canvas");
pageDisplay = document.getElementById("pageNumber");
req = new XMLHttpRequest();
req.open("GET", "uncompressed.tracemonkey-pldi-09.pdf");
req.onreadystatechange = xhrstate;
req.send(null);
}
function xhrstate() {
if (req.readyState == 4 && req.status == 200) {
var data = req.mozResponseArrayBuffer;
pdf = new PDFDoc(new Stream(data));
numPages = pdf.numPages;
displayPage(1);
}
}
function displayPage(num) {
var page = pdf.getPage(pageNum = num);
pageDisplay.value = num;
var ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();
var gfx = new CanvasGraphics(ctx);
var interp = new Interpreter(gfx);
interp.interpret(page);
}
function nextPage() {
if (pageNum < numPages)
++pageNum;
displayPage(pageNum);
}
function prevPage() {
if (pageNum > 0)
--pageNum;
displayPage(pageNum);
}
function profile() {
const NUM_TRIALS = 10000;
var start = Date.now();
for (var i = 0; i < NUM_TRIALS; ++i)
displayPage(pageNum);
var end = Date.now();
var elapsed = (end - start);
alert("Drawing current page "+ NUM_TRIALS +" times took "+
(elapsed / 1000.0) +" seconds, "+
"~"+ (elapsed / NUM_TRIALS) +" ms/draw (totally unscientific)");
}
</script>
</head>
<body onload="load();">
<div>
<button onclick="prevPage();">Previous</button>
<button onclick="nextPage();">Next</button>
<input type="text" id="pageNumber" value="0" size="5"></input>
<button onclick="profile();">Profile</button>
<div id="viewer">
<!-- Canvas dimensions must be specified in CSS pixels. CSS pixels
-- are always 96 dpi. These dimensions are 8.5x11in at 96dpi. -->
<canvas id="canvas" width="816" height="1056"></canvas>
</div>
</body>
</html>