Download: pdfjs-non-nodejs-browser-demo.html
Demo:
<html>
<body>
<!-- pdf.min.js v2.6.347 -->
<script>
/**
CHECKOUT_DOWNLOAD_DEMO_HTML_FILE
**/
</script>
<style>
#the-canvas {
border: 1px solid black;
direction: ltr;
}
</style>
<h1>PDF.js 'Hello, world!' example</h1>
<canvas id="the-canvas"></canvas>
<script>
// Example pdf taken from:
// https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf'
var url = 'data:application/pdf;base64,CHECKOUT_DOWNLOAD_DEMO_HTML_FILE';
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property( base64 URL ) pdf.worker.min.js v2.6.347 :
pdfjsLib.GlobalWorkerOptions.workerSrc = 'CHECKOUT_DOWNLOAD_DEMO_HTML_FILE';
// Asynchronous download of PDF
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF loaded');
// Fetch the first page
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport({scale: 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
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
// PDF loading error
console.error(reason);
});
</script>
</body>
<!--
Example taken from: https://jsfiddle.net/pdfjs/9engc9mw/
-->
</html>