<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>PDFJS Demo</title>
<script src="js/pdf.min.js" type="module"></script>
<script src="js/pdf.worker.js" type="module"></script>
</head>
<body>
<section id="wrapper-for-pdf"></section>
<script type="module">
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const loadingTask = pdfjsLib.getDocument('pdf/example.pdf');
loadingTask.promise.then(function (pdf) {
console.log('PDF loaded'.pdf);
const
numPages = pdf.numPages,
wrapper = document.getElementById('wrapper-for-pdf');
// Fetch and render all pages
for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
pdf.getPage(pageNumber).then(function (page) {
console.log('Page loaded');
const scale = 1,
viewport = page.getViewport({ scale: scale }),
// Prepare canvas using PDF page dimensions
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
resolution = 2;
canvas.height = resolution * viewport.height; //actual size
canvas.width = resolution * viewport.width;
canvas.style.width = '100%';
canvas.style.maxWidth = viewport.width + 'px';
// Prepare object needed by render method
const renderContext = {
canvasContext: context,
viewport: viewport,
transform: [resolution, 0, 0, resolution, 0, 0] // force it bigger size
};
// Render PDF page
page.render(renderContext);
wrapper.append(canvas);
}, function (reason) {
// PDF loading error
console.error(reason);
});
}
});
</script>
</body>
</html>
