ingredient.
At this point, we can load our PDF file by calling the
To actually render a page, we must call the
The dimensions of the viewport depend on the original size of the page and the zoom level. In order to make sure that the entire viewport is rendered on our canvas, we must now change the size of our canvas to match that of the viewport. Here’s how:
At this point, we can go ahead and render the page.
Putting it all together, the whole source code looks like this.
If you try opening the web page in a browser, you should now be able to see the first page of your PDF file.
1 |
|
2 |
|
3 |
|
To maintain issues easy, we’ll be rendering just one web page contained in the canvas at any given time. We’ll, nonetheless, enable customers to change to the earlier web page or the subsequent web page by urgent a button. Moreover, to show the present web page quantity, and to permit customers to leap to any web page they want, our interface may have an enter area.
To assist zoom operations, add two extra buttons to the interface: one to zoom in and one to zoom out.
1 |
|
2 |
|
3 |
|
4 |
|
On the finish of this part, the online web page code appears to be like like this.
1 |
|
2 |
lang="en">
|
3 |
|
4 |
charset="utf-8">
|
5 |
identify="viewport" content material="width=device-width, initial-scale=1">
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
id="current_page" worth="1" kind="quantity"/>
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
2. Getting PDF.js
Now {that a} bare-bones person interface for our JavaScript PDF viewer is prepared, let’s add PDF.js to our net web page. As a result of the most recent model of the library is accessible on CDNJS, we are able to achieve this by merely including the next traces in the direction of the top of the online web page.
1 |
|
2 |
src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"> |
3 |
|
Should you choose to make use of a neighborhood copy of the library, you possibly can obtain it from the pdfjs-dist repository.
3. Loading a PDF File
Earlier than we begin loading a PDF file, let’s create a easy JavaScript object to retailer the state of our PDF viewer in JS. Inside it, we’ll have three gadgets: a reference to the PDF file itself, the present web page index, and the present zoom degree.
1 |
|
2 |
var myState = { |
3 |
pdf: null, |
4 |
currentPage: 1, |
5 |
zoom: 1 |
6 |
}
|
7 |
|
8 |
// more code here
|
9 |
|
getDocument() method of the pdfjsLib object, which runs asynchronously.
1 |
pdfjsLib.getDocument('./my_document.pdf').then((pdf) => {
|
2 |
|
3 |
// more code here |
4 |
|
5 |
}); |
Note that the
If you don’t have a PDF file handy, you can get the one I’m using from Wikipedia.
Once the PDF file has been loaded successfully, we can update the getDocument() method internally uses an XMLHttpRequest object to load the PDF file. This means that the file must be present either on your own web server or on a server that allows cross-origin requests.
pdf property of our state object.
Lastly, add a call to a function named render() so that our PDF viewer in JS automatically renders the first page of the PDF file. We’ll define the function in the next step.
4. Rendering a Page
By calling thegetPage() method of the pdf object and passing a page number to it, we can get a reference to any page in the PDF file. For now, let’s pass the currentPage property of our state object to it. This method too returns a promise, so we’ll need a callback function to handle its result.
Accordingly, create a new function called render() containing the following code:
1 |
function render() {
|
2 |
myState.pdf.getPage(myState.currentPage).then((page) => {
|
3 |
|
4 |
// more code here |
5 |
|
6 |
}); |
7 |
} |
render() method of the page object available inside the callback. As arguments, the method expects the 2D context of our canvas and a PageViewport object, which we can get by calling the getViewport() method. Because the getViewport() method expects the desired zoom level as an argument, we must pass the zoom property of our state object to it.
1 |
var canvas = document.getElementById("pdf_renderer");
|
2 |
var ctx = canvas.getContext('2d');
|
3 |
|
4 |
var viewport = page.getViewport(myState.zoom); |
1 |
canvas.width = viewport.width; |
2 |
canvas.height = viewport.height; |
1 |
page.render({
|
2 |
canvasContext: ctx, |
3 |
viewport: viewport |
4 |
}); |
1 |
|
2 |
|
3 |
lang="en">
|
4 |
|
5 |
charset="utf-8">
|
6 |
name="viewport" content="width=device-width, initial-scale=1">
|
7 |
|
8 |
|
9 |
src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"> |
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
id="current_page" worth="1" kind="quantity"/>
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
var myState = { |
32 |
pdf: null, |
33 |
currentPage: 1, |
34 |
zoom: 1 |
35 |
}
|
36 |
|
37 |
pdfjsLib.getDocument('./my_document.pdf').then((pdf) => { |
38 |
|
39 |
myState.pdf = pdf; |
40 |
render(); |
41 |
|
42 |
});
|
43 |
|
44 |
function render() { |
45 |
myState.pdf.getPage(myState.currentPage).then((page) => { |
46 |
|
47 |
var canvas = document.getElementById("pdf_renderer"); |
48 |
var ctx = canvas.getContext('2d'); |
49 |
|
50 |
var viewport = page.getViewport(myState.zoom); |
51 |
|
52 |
canvas.width = viewport.width; |
53 |
canvas.height = viewport.height; |
54 |
|
55 |
page.render({ |
56 |
canvasContext: ctx, |
57 |
viewport: viewport |
58 |
});
|
59 |
});
|
60 |
}
|
61 |
|
62 |
|
63 |
|
element encapsulating our canvas and set its overflow CSS property to auto. This property, when necessary, adds scroll bars to the
element, allowing users to scroll both horizontally and vertically.
Add the following code inside the
1
2
#canvas_container {
3
width: 800px;
4
height: 450px;
5
overflow: auto;
6
}
7
You are, of course, free to change the width and height or even use media queries to make the
element match your requirements.
Optionally, you can include the following CSS rules to make the
element seem more distinct:
1
#canvas_container {
2
background: #333;
3
text-align: center;
4
border: solid 3px;
5
}
If you refresh the web page now, you should see something like this on your screen:
5. Changing the Current Page
Our JavaScript PDF viewer is currently capable of showing only the first page of any PDF file given to it. To allow users to change the page being rendered, we must now add click event listeners to the go_previous and go_next buttons we created earlier.
Inside the event listener of the go_previous button, we must decrement the currentPage property of our state object, making sure that it doesn't fall below 1. After we do so, we can simply call the render() function again to render the new page.
Additionally, we must update the value of the current_page text field so that it displays the new page number. The following code shows you how:
1
document.getElementById('go_previous')
2
.addEventListener('click', (e) => );
Similarly, inside the event listener of the go_next button, we must increment the currentPage property, while ensuring that it doesn’t exceed the number of pages present in the PDF file, which we can determine using the numPages property of the _pdfInfo object.
1
document.getElementById('go_next')
2
.addEventListener('click', (e) => myState.currentPage > myState.pdf._pdfInfo.numPages)
4
return;
5
6
myState.currentPage += 1;
7
document.getElementById("current_page").value = myState.currentPage;
8
render();
9
);
Lastly, we must add a key press event listener to the current_page text field so that users can directly jump to any page they desire by simply typing in a page number and hitting the Enter key. Inside the event listener, we need to make sure that the number the user has entered is both greater than zero and less than or equal to the numPages property.
1
document.getElementById('current_page')
2
.addEventListener('keypress', (e) => {
3
if(myState.pdf == null) return;
4
5
// Get key code
6
var code = (e.keyCode ? e.keyCode : e.which);
7
8
// If key code matches that of the Enter key
9
if(code == 13) {
10
var desiredPage = document.getElementById('current_page').valueAsNumber;
11
12
if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
13
myState.currentPage = desiredPage;
14
document.getElementById("current_page").value = desiredPage;
15
render();
16
}
17
}
18
});
Our PDF viewer in JavaScript can now display any page of the PDF file.
6. Changing the Zoom Level
Because our render() function already uses the zoom property of the state object while rendering a page, adjusting the zoom level is as easy as incrementing or decrementing the property and calling the function.
Inside the on-click event listener of the zoom_in button, let’s increment the zoom property by 0.5.
1
document.getElementById('zoom_in')
2
.addEventListener('click', (e) => {
3
if(myState.pdf == null) return;
4
myState.zoom += 0.5;
5
6
render();
7
});
And inside the on-click event listener of the zoom_out button, let’s decrement the zoom property by 0.5.
1
document.getElementById('zoom_out')
2
.addEventListener('click', (e) => {
3
if(myState.pdf == null) return;
4
myState.zoom -= 0.5;
5
6
render();
7
});
You are free to add upper and lower bounds to the zoom property, but they are not required.
This is what it looks like when it’s all put together.
1
2
3
lang="en">
4
5
charset="utf-8">
6
name="viewport" content="width=device-width, initial-scale=1">
7
8
9
src="http://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js">
10
11
12
13
#canvas_container {
14
width: 800px;
15
top: 450px;
16
overflow: auto;
17
}
18
19
#canvas_container {
20
background: #333;
21
text-align: heart;
22
border: stable 3px;
23
}
24
25
26
27
id="my_pdf_viewer">
28
id="canvas_container">
29
30
31
32
id="navigation_controls">
33
34
id="current_page" worth="1" kind="quantity"/>
35
36
37
38
id="zoom_controls">
39
40
41
42
43
44
45
var myState = {
46
pdf: null,
47
currentPage: 1,
48
zoom: 1
49
}
50
51
pdfjsLib.getDocument('./my_document.pdf').then((pdf) => {
52
53
myState.pdf = pdf;
54
render();
55
56
});
57
58
perform render() {
59
myState.pdf.getPage(myState.currentPage).then((web page) => {
60
61
var canvas = doc.getElementById("pdf_renderer");
62
var ctx = canvas.getContext('second');
63
64
var viewport = web page.getViewport(myState.zoom);
65
66
canvas.width = viewport.width;
67
canvas.top = viewport.top;
68
69
web page.render({
70
canvasContext: ctx,
71
viewport: viewport
72
});
73
});
74
}
75
76
doc.getElementById('go_previous').addEventListener('click on', (e) => myState.currentPage == 1)
78
return;
79
myState.currentPage -= 1;
80
doc.getElementById("current_page").worth = myState.currentPage;
81
render();
82
);
83
84
doc.getElementById('go_next').addEventListener('click on', (e) => );
91
92
doc.getElementById('current_page').addEventListener('keypress', (e) => {
93
if(myState.pdf == null) return;
94
95
// Get key code
96
var code = (e.keyCode ? e.keyCode : e.which);
97
98
// If key code matches that of the Enter key
99
if(code == 13) {
100
var desiredPage =
101
doc.getElementById('current_page').valueAsNumber;
102
103
if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
104
myState.currentPage = desiredPage;
105
doc.getElementById("current_page").worth = desiredPage;
106
render();
107
}
108
}
109
});
110
111
doc.getElementById('zoom_in').addEventListener('click on', (e) => {
112
if(myState.pdf == null) return;
113
myState.zoom += 0.5;
114
render();
115
});
116
117
doc.getElementById('zoom_out').addEventListener('click on', (e) => {
118
if(myState.pdf == null) return;
119
myState.zoom -= 0.5;
120
render();
121
});
122
123
124
Our PDF viewer in JavaScript is prepared. Should you refresh the online web page once more, you need to be capable to view all of the pages current within the PDF doc in JavaScript and in addition zoom in to or zoom out of them.
Congratulations! You’ve Realized to Create a Viewer for PDF Paperwork in JavaScript!
You now know the best way to use PDF.js to create a customized JavaScript PDF viewer on your web site. Together with your new viewer for PDF paperwork in JavaScript, you possibly can confidently supply a seamless person expertise whereas displaying your group's brochures, white papers, types, and different paperwork usually meant to be distributed as arduous copies.
You possibly can learn more about PDF.js on the official GitHub repo.
