141 lines
3.4 KiB
HTML
141 lines
3.4 KiB
HTML
<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;
|
|
}
|
|
#controls {
|
|
border-bottom: 1px solid black;
|
|
position:fixed;
|
|
left: 0px; top: 0px;
|
|
width: 100%;
|
|
padding: 7px;
|
|
background-color: rgb(242, 240, 238);
|
|
}
|
|
span#info {
|
|
float: right;
|
|
font: 14px sans-serif;
|
|
margin-right: 10px;
|
|
}
|
|
#viewer {
|
|
margin: auto;
|
|
border: 1px solid black;
|
|
width: 8.5in;
|
|
height: 11in;
|
|
}
|
|
#pageNumber {
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
function queryParams() {
|
|
var qs = window.location.search.substring(1);
|
|
var kvs = qs.split("&");
|
|
var params = { };
|
|
for (var i = 0; i < kvs.length; ++i) {
|
|
var kv = kvs[i].split("=");
|
|
params[unescape(kv[0])] = unescape(kv[1]);
|
|
}
|
|
return params;
|
|
}
|
|
|
|
var canvas, numPages, pageDisplay, pageNum;
|
|
function load() {
|
|
canvas = document.getElementById("canvas");
|
|
canvas.mozOpaque = true;
|
|
pageDisplay = document.getElementById("pageNumber");
|
|
infoDisplay = document.getElementById("info");
|
|
pageNum = parseInt(queryParams().page) || 1;
|
|
fileName = queryParams().file || "compressed.tracemonkey-pldi-09.pdf";
|
|
open(fileName);
|
|
}
|
|
|
|
function open(url) {
|
|
document.title = url;
|
|
req = new XMLHttpRequest();
|
|
req.open("GET", url);
|
|
req.mozResponseType = req.responseType = "arraybuffer";
|
|
req.expected = (document.URL.indexOf("file:") == 0) ? 0 : 200;
|
|
req.onreadystatechange = xhrstate;
|
|
req.send(null);
|
|
}
|
|
|
|
function xhrstate() {
|
|
if (req.readyState == 4 && req.status == req.expected) {
|
|
var data = req.mozResponseArrayBuffer ||
|
|
req.mozResponse ||
|
|
req.responseArrayBuffer ||
|
|
req.response;
|
|
pdf = new PDFDoc(new Stream(data));
|
|
numPages = pdf.numPages;
|
|
document.getElementById("numPages").innerHTML = numPages.toString();
|
|
gotoPage(pageNum);
|
|
}
|
|
}
|
|
|
|
function displayPage(num) {
|
|
pageDisplay.value = num;
|
|
|
|
var t0 = Date.now();
|
|
|
|
var page = pdf.getPage(pageNum = num);
|
|
|
|
var t1 = Date.now();
|
|
|
|
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);
|
|
page.display(gfx);
|
|
|
|
var t2 = Date.now();
|
|
|
|
infoDisplay.innerHTML = "Time to render: "+ (t1 - t0) + "/" + (t2 - t1) + " ms";
|
|
}
|
|
|
|
function nextPage() {
|
|
if (pageNum < numPages)
|
|
++pageNum;
|
|
displayPage(pageNum);
|
|
}
|
|
|
|
function prevPage() {
|
|
if (pageNum > 1)
|
|
--pageNum;
|
|
displayPage(pageNum);
|
|
}
|
|
function gotoPage(num) {
|
|
if (0 <= num && num <= numPages)
|
|
pageNum = num;
|
|
displayPage(pageNum);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onload="load();">
|
|
<div id="controls">
|
|
<button onclick="prevPage();">Previous</button>
|
|
<button onclick="nextPage();">Next</button>
|
|
<input type="text" id="pageNumber" onchange="gotoPage(this.value);"
|
|
value="1" size="4"></input>
|
|
/ <span id="numPages">--</span>
|
|
<span id="info"></span>
|
|
</div>
|
|
<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>
|