Skip to content

Instantly share code, notes, and snippets.

@whaleinvasion
Forked from fcingolani/index.html
Created September 17, 2018 10:33
Show Gist options
  • Save whaleinvasion/4bbd84a42079f98e65e92f97b452b848 to your computer and use it in GitHub Desktop.
Save whaleinvasion/4bbd84a42079f98e65e92f97b452b848 to your computer and use it in GitHub Desktop.
How to render a full PDF using Mozilla's pdf.js
<html>
<body>
<!-- really dirty! this is just a test drive ;) -->
<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
function renderPDF(url, canvasContainer, options) {
var options = options || { scale: 1 };
function renderPage(page) {
var viewport = page.getViewport(options.scale);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
canvas.height = viewport.height;
canvas.width = viewport.width;
canvasContainer.appendChild(canvas);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++)
pdfDoc.getPage(num).then(renderPage);
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
}
</script>
<div id="holder"></div>
<script type="text/javascript">
renderPDF('sample.pdf', document.getElementById('holder'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment