Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separate js and css from the test.html file

Browse Source
This commit is contained in:
Vivien Nicolas 2011-05-26 16:02:52 +02:00
parent 53018c8e4c
commit c76e2c5114
3 changed files with 122 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
test.css Normal file
View File

@ -0,0 +1,35 @@
/* -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- /
/* vim: set shiftwidth=4 tabstop=8 autoindent cindent expandtab: */
body {
margin: 6px;
padding: 0px;
background-color: #c0bdb7;
}
#controls {
position:fixed;
left: 0px;
top: 0px;
width: 100%;
padding: 7px;
border-bottom: 1px solid black;
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;
}

141
test.html
View File

@ -1,125 +1,26 @@
<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>
<head>
<title>Simple pdf.js page viewer</title>
<link rel="stylesheet" href="test.css"></link>
<script type="text/javascript">
var canvas, numPages, pageDisplay, pageNum;
function load() {
canvas = document.getElementById("canvas");
canvas.mozOpaque = true;
pageDisplay = document.getElementById("pageNumber");
infoDisplay = document.getElementById("info");
open("uncompressed.tracemonkey-pldi-09.pdf");
}
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
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;
displayPage(1);
}
}
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="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>
<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="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>

66
test.js Normal file
View File

@ -0,0 +1,66 @@
/* -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- /
/* vim: set shiftwidth=4 tabstop=8 autoindent cindent expandtab: */
var pdfDocument, canvas, pageDisplay, pageNum;
function load() {
canvas = document.getElementById("canvas");
canvas.mozOpaque = true;
open("uncompressed.tracemonkey-pldi-09.pdf");
}
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 = function() {
if (req.readyState == 4 && req.status == req.expected) {
var data = req.mozResponseArrayBuffer || req.mozResponse ||
req.responseArrayBuffer || req.response;
pdfDocument = new PDFDoc(new Stream(data));
displayPage(1);
}
};
req.send(null);
}
function displayPage(num) {
document.getElementById("pageNumber").value = num;
var t0 = Date.now();
var page = pdfDocument.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();
var infoDisplay = document.getElementById("info");
infoDisplay.innerHTML = "Time to render: "+ (t1 - t0) + "/" + (t2 - t1) + " ms";
}
function nextPage() {
if (pageNum < pdfDocument.numPages)
displayPage(++pageNum);
}
function prevPage() {
if (pageNum > 1)
displayPage(--pageNum);
}
function gotoPage(num) {
if (0 <= num && num <= numPages)
displayPage(pageNum = num);
}