├── README.md
├── Screenshot 2020-12-04 112442.jpg
├── custom.css
├── custom.js
└── pdf.html


/README.md:
--------------------------------------------------------------------------------
1 | # PDF_file_reader
2 | PDF_file_reader
3 | <img src="Screenshot 2020-12-04 112442.jpg">


--------------------------------------------------------------------------------
/Screenshot 2020-12-04 112442.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Huniko519/WebViewer-PDF-rendering-the-best-example/5f1dd9eb908d322c17c15576dad64d61bf801c0f/Screenshot 2020-12-04 112442.jpg


--------------------------------------------------------------------------------
/custom.css:
--------------------------------------------------------------------------------
 1 | 
 2 | #file-to-upload {
 3 | 	display: none;
 4 | }
 5 | 
 6 | #pdf-main-container {
 7 | 	margin: 20px auto;
 8 | }
 9 | 
10 | #pdf-loader {
11 | 	display: none;
12 | 	text-align: center;
13 | 	color: #999999;
14 | 	font-size: 13px;
15 | 	line-height: 100px;
16 | 	height: 100px;
17 | }
18 | 
19 | #pdf-contents {
20 | 	display: none;
21 | }
22 | 
23 | #pdf-meta {
24 | 	overflow: hidden;
25 | 	margin: 0 0 20px 0;
26 | }
27 | 
28 | #pdf-buttons {
29 | 	display: flex;
30 | 	padding: 10px 0px;
31 | }
32 | 
33 | #page-count-container {
34 | 	width: 80%;
35 | 	text-align: center;
36 | }
37 | 
38 | #pdf-current-page {
39 | 	display: inline;
40 | }
41 | #pdf-prev{
42 | 	float: left;
43 | 	width: 10%;
44 | }
45 | #pdf-next{
46 | 	float: right;
47 | 	width: 10%;
48 | }
49 | #pdf-total-pages {
50 | 	display: inline;
51 | }
52 | 
53 | #pdf-canvas {
54 |     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
55 | }
56 | 
57 | #page-loader {
58 | 	height: 100px;
59 | 	line-height: 100px;
60 | 	text-align: center;
61 | 	display: none;
62 | 	color: #999999;
63 | 	font-size: 13px;
64 | }


--------------------------------------------------------------------------------
/custom.js:
--------------------------------------------------------------------------------
  1 | 
  2 | var _PDF_DOC,
  3 |     _CURRENT_PAGE,
  4 |     _TOTAL_PAGES,
  5 |     _PAGE_RENDERING_IN_PROGRESS = 0,
  6 |     _CANVAS = document.querySelector('#pdf-canvas');
  7 | 
  8 | // initialize and load the PDF
  9 | async function showPDF(pdf_url) {
 10 |     document.querySelector("#pdf-loader").style.display = 'block';
 11 | 
 12 |     // get handle of pdf document
 13 |     try {
 14 |         _PDF_DOC = await pdfjsLib.getDocument({ url: pdf_url });
 15 |     }
 16 |     catch(error) {
 17 |         alert(error.message);
 18 |     }
 19 | 
 20 |     // total pages in pdf
 21 |     _TOTAL_PAGES = _PDF_DOC.numPages;
 22 |     
 23 |     // Hide the pdf loader and show pdf container
 24 |     document.querySelector("#pdf-loader").style.display = 'none';
 25 |     document.querySelector("#pdf-contents").style.display = 'block';
 26 |     document.querySelector("#pdf-total-pages").innerHTML = _TOTAL_PAGES;
 27 | 
 28 |     // show the first page
 29 |     showPage(1);
 30 | }
 31 | 
 32 | // load and render specific page of the PDF
 33 | async function showPage(page_no) {
 34 |     _PAGE_RENDERING_IN_PROGRESS = 1;
 35 |     _CURRENT_PAGE = page_no;
 36 | 
 37 |     // disable Previous & Next buttons while page is being loaded
 38 |     document.querySelector("#pdf-next").disabled = true;
 39 |     document.querySelector("#pdf-prev").disabled = true;
 40 | 
 41 |     // while page is being rendered hide the canvas and show a loading message
 42 |     document.querySelector("#pdf-canvas").style.display = 'none';
 43 |     document.querySelector("#page-loader").style.display = 'block';
 44 | 
 45 |     // update current page
 46 |     document.querySelector("#pdf-current-page").innerHTML = page_no;
 47 |     
 48 |     // get handle of page
 49 |     try {
 50 |         var page = await _PDF_DOC.getPage(page_no);
 51 |     }
 52 |     catch(error) {
 53 |         alert(error.message);
 54 |     }
 55 | 
 56 |     // original width of the pdf page at scale 1
 57 |     var pdf_original_width = page.getViewport(1).width;
 58 |     
 59 |     // as the canvas is of a fixed width we need to adjust the scale of the viewport where page is rendered
 60 |     var scale_required = _CANVAS.width / pdf_original_width;
 61 | 
 62 |     // get viewport to render the page at required scale
 63 |     var viewport = page.getViewport(scale_required);
 64 | 
 65 |     // set canvas height same as viewport height
 66 |     _CANVAS.height = viewport.height;
 67 | 
 68 |     // setting page loader height for smooth experience
 69 |     document.querySelector("#page-loader").style.height =  _CANVAS.height + 'px';
 70 |     document.querySelector("#page-loader").style.lineHeight = _CANVAS.height + 'px';
 71 | 
 72 |     // page is rendered on <canvas> element
 73 |     var render_context = {
 74 |         canvasContext: _CANVAS.getContext('2d'),
 75 |         viewport: viewport
 76 |     };
 77 |         
 78 |     // render the page contents in the canvas
 79 |     try {
 80 |         await page.render(render_context);
 81 |     }
 82 |     catch(error) {
 83 |         alert(error.message);
 84 |     }
 85 | 
 86 |     _PAGE_RENDERING_IN_PROGRESS = 0;
 87 | 
 88 |     // re-enable Previous & Next buttons
 89 |     document.querySelector("#pdf-next").disabled = false;
 90 |     document.querySelector("#pdf-prev").disabled = false;
 91 | 
 92 |     // show the canvas and hide the page loader
 93 |     document.querySelector("#pdf-canvas").style.display = 'block';
 94 |     document.querySelector("#page-loader").style.display = 'none';
 95 | }
 96 | 
 97 | // click on the "Previous" page button
 98 | document.querySelector("#pdf-prev").addEventListener('click', function() {
 99 |     if(_CURRENT_PAGE != 1)
100 |         showPage(--_CURRENT_PAGE);
101 | });
102 | 
103 | // click on the "Next" page button
104 | document.querySelector("#pdf-next").addEventListener('click', function() {
105 |     if(_CURRENT_PAGE != _TOTAL_PAGES)
106 |         showPage(++_CURRENT_PAGE);
107 | });
108 | 


--------------------------------------------------------------------------------
/pdf.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 | <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 6 | <link rel="stylesheet" href="custom.css">
 7 | </head>
 8 | <style>
 9 | 	@media only screen and (max-width: 600px) {
10 | 		#pdf-main-container, #pdf-canvas{
11 | 			width: 300px !important;
12 | 		}
13 | 	}
14 | </style>
15 | <body>
16 | <div id="pdf-main-container" style="width: 500px">
17 | 	<div id="pdf-loader">Loading document ...</div>
18 | 	<div id="pdf-contents">
19 | 		<div>
20 | 			<div id="pdf-buttons">
21 | 				<button id="pdf-prev"><</button>
22 | 				<div id="page-count-container">Page <div id="pdf-current-page"></div> of <div id="pdf-total-pages"></div></div>	
23 | 				<button id="pdf-next">></button>
24 | 			</div>
25 | 		</div>
26 | 		<canvas id="pdf-canvas" width="500px"></canvas>
27 | 		<div id="page-loader">Loading page ...</div>
28 | 	</div>
29 | </div>
30 | <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.228/pdf.min.js"></script>
31 | <script src="custom.js"></script>
32 | <script>
33 | window.onload = function(e){ 
34 |     showPDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf');
35 | }
36 | </script>
37 | 
38 | </body>
39 | </html>


--------------------------------------------------------------------------------