PDF.js je slabo dokumentovan pa ćeš morati dosta da eksperimentišeš.
Evo nešto na brzinu:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>PDF demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
</head>
<body>
<select id="pageSelector">
</select>
<div class="pdf">
<canvas id="pdfCanvas"/>
</div>
<script type="text/javascript">
$(document).ready(function() {
var url = 'test.pdf';
PDFJS.disableWorker = true;
// ucitavamo PDF i punimo dropdown list
PDFJS.getDocument(url).then(function(pdf) {
var numberOfPages = pdf.numPages;
for (var i = 1; i <= numberOfPages; i++) {
$('<option/>').val(i).html(i).appendTo('#pageSelector');
}
});
// prikazujemo prvu stranu
displayPage(1);
// kada se promeni vrednost u dropdown listi, prikazujemo odgovarajucu stranu
$('#pageSelector').change(function() {
var value = $(this).val();
displayPage(value);
});
// funkcija za prikazivanje jedne strane
function displayPage(pageNum) {
PDFJS.getDocument(url).then(function(pdf) {
pdf.getPage(pageNum).then(function(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('pdfCanvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({ canvasContext: context, viewport: viewport });
});
});
}
});
</script>
</body>
</html>
Strane iz PDF-a se učitavaju u div koji ima klasu pdf ->
div class="pdf"
Putanja do pdf fajla je setovana ovde:
var url = 'test.pdf';
Možeš da je promeniš ili da jednostavno tako nazoveš fajl :)
Kada budeš testirao, ovaj HTML fajl mora da se nalazi na web serveru (bilo da podigneš web server kod sebe ili da uploaduješ fajl negde) jer ćeš u suprotnom dobiti grešku:
XMLHttpRequest cannot load file:///test.pdf. Cross origin requests are only supported for HTTP.
Evo taj isti html kod mene na sajtu:
http://www.dcaric.com/pdfdemo/
Obrati pažnju da je ovo HTML5 i da možda neće raditi sa starijim verzijama browser-a.
