Jonas Jenwald
11 years ago
5 changed files with 288 additions and 2 deletions
@ -0,0 +1,77 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>'Hello, world!' example</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<h1>'Hello, world!' example</h1> |
||||||
|
|
||||||
|
<canvas id="the-canvas" style="border:1px solid black"></canvas> |
||||||
|
|
||||||
|
<!-- for legacy browsers add compatibility.js --> |
||||||
|
<!--<script src="../compatibility.js"></script>--> |
||||||
|
|
||||||
|
<script src="../../build/pdf.js"></script> |
||||||
|
|
||||||
|
<script id="script"> |
||||||
|
// |
||||||
|
// If absolute URL from the remote server is provided, configure the CORS |
||||||
|
// header on that server. |
||||||
|
// |
||||||
|
var url = './helloworld.pdf'; |
||||||
|
|
||||||
|
// |
||||||
|
// Disable workers to avoid yet another cross-origin issue (workers need |
||||||
|
// the URL of the script to be loaded, and dynamically loading a cross-origin |
||||||
|
// script does not work). |
||||||
|
// |
||||||
|
// PDFJS.disableWorker = true; |
||||||
|
|
||||||
|
// |
||||||
|
// If pdf.js must be execute via eval or pdf.worker.js is located at the |
||||||
|
// different location that pdf.js, specify workerSrc. |
||||||
|
// |
||||||
|
// PDFJS.workerSrc = '../../build/pdf.worker.js'; |
||||||
|
|
||||||
|
// |
||||||
|
// Asynchronous download PDF |
||||||
|
// |
||||||
|
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) { |
||||||
|
// |
||||||
|
// Fetch the first page |
||||||
|
// |
||||||
|
pdf.getPage(1).then(function getPageHelloWorld(page) { |
||||||
|
var scale = 1.5; |
||||||
|
var viewport = page.getViewport(scale); |
||||||
|
|
||||||
|
// |
||||||
|
// Prepare canvas using PDF page dimensions |
||||||
|
// |
||||||
|
var canvas = document.getElementById('the-canvas'); |
||||||
|
var context = canvas.getContext('2d'); |
||||||
|
canvas.height = viewport.height; |
||||||
|
canvas.width = viewport.width; |
||||||
|
|
||||||
|
// |
||||||
|
// Render PDF page into canvas context |
||||||
|
// |
||||||
|
var renderContext = { |
||||||
|
canvasContext: context, |
||||||
|
viewport: viewport |
||||||
|
}; |
||||||
|
page.render(renderContext); |
||||||
|
}); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
<hr> |
||||||
|
<h2>JavaScript code:</h2> |
||||||
|
<pre id="code"></pre> |
||||||
|
<script> |
||||||
|
document.getElementById('code').textContent = |
||||||
|
document.getElementById('script').text; |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
%PDF-1.7 |
||||||
|
|
||||||
|
1 0 obj % entry point |
||||||
|
<< |
||||||
|
/Type /Catalog |
||||||
|
/Pages 2 0 R |
||||||
|
>> |
||||||
|
endobj |
||||||
|
|
||||||
|
2 0 obj |
||||||
|
<< |
||||||
|
/Type /Pages |
||||||
|
/MediaBox [ 0 0 200 200 ] |
||||||
|
/Count 1 |
||||||
|
/Kids [ 3 0 R ] |
||||||
|
>> |
||||||
|
endobj |
||||||
|
|
||||||
|
3 0 obj |
||||||
|
<< |
||||||
|
/Type /Page |
||||||
|
/Parent 2 0 R |
||||||
|
/Resources << |
||||||
|
/Font << |
||||||
|
/F1 4 0 R |
||||||
|
>> |
||||||
|
>> |
||||||
|
/Contents 5 0 R |
||||||
|
>> |
||||||
|
endobj |
||||||
|
|
||||||
|
4 0 obj |
||||||
|
<< |
||||||
|
/Type /Font |
||||||
|
/Subtype /Type1 |
||||||
|
/BaseFont /Times-Roman |
||||||
|
>> |
||||||
|
endobj |
||||||
|
|
||||||
|
5 0 obj % page content |
||||||
|
<< |
||||||
|
/Length 44 |
||||||
|
>> |
||||||
|
stream |
||||||
|
BT |
||||||
|
70 50 TD |
||||||
|
/F1 12 Tf |
||||||
|
(Hello, world!) Tj |
||||||
|
ET |
||||||
|
endstream |
||||||
|
endobj |
||||||
|
|
||||||
|
xref |
||||||
|
0 6 |
||||||
|
0000000000 65535 f |
||||||
|
0000000010 00000 n |
||||||
|
0000000079 00000 n |
||||||
|
0000000173 00000 n |
||||||
|
0000000301 00000 n |
||||||
|
0000000380 00000 n |
||||||
|
trailer |
||||||
|
<< |
||||||
|
/Size 6 |
||||||
|
/Root 1 0 R |
||||||
|
>> |
||||||
|
startxref |
||||||
|
492 |
||||||
|
%%EOF |
||||||
@ -0,0 +1,139 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<title>Previous/Next example</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
|
||||||
|
<h1>'Previous/Next' example</h1> |
||||||
|
|
||||||
|
<div> |
||||||
|
<button id="prev">Previous</button> |
||||||
|
<button id="next">Next</button> |
||||||
|
|
||||||
|
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<canvas id="the-canvas" style="border:1px solid black"></canvas> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- for legacy browsers add compatibility.js --> |
||||||
|
<!--<script src="../compatibility.js"></script>--> |
||||||
|
|
||||||
|
<script src="../../build/pdf.js"></script> |
||||||
|
|
||||||
|
<script id="script"> |
||||||
|
// |
||||||
|
// If absolute URL from the remote server is provided, configure the CORS |
||||||
|
// header on that server. |
||||||
|
// |
||||||
|
var url = '../../web/compressed.tracemonkey-pldi-09.pdf'; |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Disable workers to avoid yet another cross-origin issue (workers need |
||||||
|
// the URL of the script to be loaded, and dynamically loading a cross-origin |
||||||
|
// script does not work). |
||||||
|
// |
||||||
|
// PDFJS.disableWorker = true; |
||||||
|
|
||||||
|
// |
||||||
|
// If pdf.js must be execute via eval or pdf.worker.js is located at the |
||||||
|
// different location that pdf.js, specify workerSrc. |
||||||
|
// |
||||||
|
// PDFJS.workerSrc = '../../build/pdf.worker.js'; |
||||||
|
|
||||||
|
var pdfDoc = null, |
||||||
|
pageNum = 1, |
||||||
|
pageRendering = false, |
||||||
|
pageNumPending = null, |
||||||
|
scale = 0.8, |
||||||
|
canvas = document.getElementById('the-canvas'), |
||||||
|
ctx = canvas.getContext('2d'); |
||||||
|
|
||||||
|
/** |
||||||
|
* Get page info from document, resize canvas accordingly, and render page. |
||||||
|
* @param num Page number. |
||||||
|
*/ |
||||||
|
function renderPage(num) { |
||||||
|
pageRendering = true; |
||||||
|
// Using promise to fetch the page |
||||||
|
pdfDoc.getPage(num).then(function(page) { |
||||||
|
var viewport = page.getViewport(scale); |
||||||
|
canvas.height = viewport.height; |
||||||
|
canvas.width = viewport.width; |
||||||
|
|
||||||
|
// Render PDF page into canvas context |
||||||
|
var renderContext = { |
||||||
|
canvasContext: ctx, |
||||||
|
viewport: viewport |
||||||
|
}; |
||||||
|
var renderTask = page.render(renderContext); |
||||||
|
|
||||||
|
// Wait for rendering to finish |
||||||
|
renderTask.promise.then(function () { |
||||||
|
pageRendering = false; |
||||||
|
if (pageNumPending !== null) { |
||||||
|
// New page rendering is pending |
||||||
|
renderPage(pageNumPending); |
||||||
|
pageNumPending = null; |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
// Update page counters |
||||||
|
document.getElementById('page_num').textContent = pageNum; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* If another page rendering in progress, waits until the rendering is |
||||||
|
* finised. Otherwise, executes rendering immediately. |
||||||
|
*/ |
||||||
|
function queueRenderPage(num) { |
||||||
|
if (pageRendering) { |
||||||
|
pageNumPending = num; |
||||||
|
} else { |
||||||
|
renderPage(num); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Displays previous page. |
||||||
|
*/ |
||||||
|
function onPrevPage() { |
||||||
|
if (pageNum <= 1) { |
||||||
|
return; |
||||||
|
} |
||||||
|
pageNum--; |
||||||
|
queueRenderPage(pageNum); |
||||||
|
} |
||||||
|
document.getElementById('prev').addEventListener('click', onPrevPage); |
||||||
|
|
||||||
|
/** |
||||||
|
* Displays next page. |
||||||
|
*/ |
||||||
|
function onNextPage() { |
||||||
|
if (pageNum >= pdfDoc.numPages) { |
||||||
|
return; |
||||||
|
} |
||||||
|
pageNum++; |
||||||
|
queueRenderPage(pageNum); |
||||||
|
} |
||||||
|
document.getElementById('next').addEventListener('click', onNextPage); |
||||||
|
|
||||||
|
/** |
||||||
|
* Asynchronously downloads PDF. |
||||||
|
*/ |
||||||
|
PDFJS.getDocument(url).then(function (pdfDoc_) { |
||||||
|
pdfDoc = pdfDoc_; |
||||||
|
document.getElementById('page_count').textContent = pdfDoc.numPages; |
||||||
|
|
||||||
|
// Initial/first page rendering |
||||||
|
renderPage(pageNum); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
</body> |
||||||
|
</html> |
||||||
Loading…
Reference in new issue