Könnte dann so aussehen:
Code
<style>
#pdfviewer {
display: inline-block;
}
#toolbar {
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
#toolbar img, #toolbar input {
margin: 0 10px;
}
</style>
<div id="pdfviewer">
<div id="toolbar">
<img id="nextbtn" src="images/buttondown.png" />
<img id="prevbtn" src="images/buttonup.png" />
Seite <span id="pagedisp"></span>
<input id="pageinput" />
<img id="savebtn" src="images/buttondownload.png" />
</div>
</div>
<script type="text/javascript" src="https://rawgithub.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script src="js/download.js"></script>
<script>
var oReq = new XMLHttpRequest();
oReq.open("GET", "testmultipage.pdf", true);
oReq.responseType = "arraybuffer";
oReq.onload = function (oEvent) {
PDFJS.getDocument({ data: oReq.response }).then(function getPdfHelloWorld(pdf) {
var pageCount = pdf.pdfInfo.numPages;
function renderPage(pageNr) {
var canvas = document.createElement("canvas");
pdfviewer.appendChild(canvas);
canvas.id = "page-" + pageNr;
pdf.getPage(pageNr).then(function getPageHelloWorld(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
// Prepare canvas using PDF page dimensions.
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);
});
}
function displayPage() {
var cv = document.querySelectorAll("#pdfviewer canvas");
for (var i = 0; i < cv.length; i++) {
if (cv[i].id == "page-" + pageNr) cv[i].style.display = "block";
else cv[i].style.display = "none";
}
pagedisp.innerHTML = pageNr + "/" + pageCount;
pageinput.value = pageNr;
}
for (var pageNr = 1; pageNr <= pageCount; pageNr++) {
renderPage(pageNr);
}
var pageNr = 1;
displayPage();
nextbtn.addEventListener("click", function () {
if (pageNr < pageCount) {
pageNr++;
displayPage();
}
});
prevbtn.addEventListener("click", function () {
if (pageNr > 1) {
pageNr--;
displayPage();
}
});
pageinput.addEventListener("change", function () {
pageNr = parseInt(this.value);
displayPage();
});
savebtn.addEventListener("click", function () {
download(oReq.response, "testdownload.pdf");
});
});
}
oReq.send(null);
</script>