<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.css" rel="stylesheet" /> <script src="https://npmcdn.com/pdfjs-dist/web/compatibility.js"></script> <script src="https://npmcdn.com/pdfjs-dist/build/pdf.js"></script> <script src="https://npmcdn.com/pdfjs-dist/web/pdf_viewer.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> <button type="button" class="btn btn-info btn-lg" onclick="doModal();">Open Modal</button>

function doModal() { var dialog = bootbox.dialog({ title: 'View File', size: 'large', message: '<div id="container1" class="pdfViewer singlePageView" width="800px" height="800px"></div>' }).on('shown.bs.modal', function() { var url = "https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"; var container = document.getElementById('container1'); // Load document PDFJS.getDocument(url).then(function(doc) { var promise = Promise.resolve(); for (var i = 0; i < doc.numPages; i++) { // One-by-one load pages promise = promise.then(function(id) { return doc.getPage(id + 1).then(function(pdfPage) { // Add div with page view. var SCALE = 1.0; var pdfPageView = new PDFJS.PDFPageView({ container: container, id: id, scale: SCALE, defaultViewport: pdfPage.getViewport(SCALE), // We can enable text/annotations layers, if needed textLayerFactory: new PDFJS.DefaultTextLayerFactory(), annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory() }); // Associates the actual page with the view, and drawing it pdfPageView.setPdfPage(pdfPage); return pdfPageView.draw(); }); }.bind(null, i)); } return promise; }); }); }