javascript 2fjquery pdf file preview during upload

Solutions on MaxInterview for javascript 2fjquery pdf file preview during upload by the best coders in the world

showing results for - "javascript 2fjquery pdf file preview during upload"
Prune
20 Nov 2018
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});
similar questions