1// Loaded via <script> tag, create shortcut to access PDF.js exports.
2var pdfjsLib = window['pdfjs-dist/build/pdf'];
3// The workerSrc property shall be specified.
4pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
5
6$("#myPdf").on("change", function(e){
7 var file = e.target.files[0]
8 if(file.type == "application/pdf"){
9 var fileReader = new FileReader();
10 fileReader.onload = function() {
11 var pdfData = new Uint8Array(this.result);
12 // Using DocumentInitParameters object to load binary data.
13 var loadingTask = pdfjsLib.getDocument({data: pdfData});
14 loadingTask.promise.then(function(pdf) {
15 console.log('PDF loaded');
16
17 // Fetch the first page
18 var pageNumber = 1;
19 pdf.getPage(pageNumber).then(function(page) {
20 console.log('Page loaded');
21
22 var scale = 1.5;
23 var viewport = page.getViewport({scale: scale});
24
25 // Prepare canvas using PDF page dimensions
26 var canvas = $("#pdfViewer")[0];
27 var context = canvas.getContext('2d');
28 canvas.height = viewport.height;
29 canvas.width = viewport.width;
30
31 // Render PDF page into canvas context
32 var renderContext = {
33 canvasContext: context,
34 viewport: viewport
35 };
36 var renderTask = page.render(renderContext);
37 renderTask.promise.then(function () {
38 console.log('Page rendered');
39 });
40 });
41 }, function (reason) {
42 // PDF loading error
43 console.error(reason);
44 });
45 };
46 fileReader.readAsArrayBuffer(file);
47 }
48});