You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.4 KiB
140 lines
3.4 KiB
<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>
|
|
|