عنصر
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 |
|
برای ساده نگه داشتن کارها، ما در هر زمان فقط یک صفحه را در داخل بوم نمایش می دهیم. با این حال، به کاربران اجازه می‌دهیم تا با فشار دادن یک دکمه به صفحه قبلی یا صفحه بعدی سوئیچ کنند. علاوه بر این، برای نمایش شماره صفحه فعلی و اجازه دادن به کاربران برای پرش به هر صفحه ای که می خواهند، رابط ما دارای یک فیلد ورودی خواهد بود.
برای پشتیبانی از عملیات زوم، دو دکمه دیگر را به رابط اضافه کنید: یکی برای بزرگنمایی و دیگری برای بزرگنمایی.
1 |
|
2 |
|
3 |
|
4 |
|
در انتهای این بخش، کد صفحه وب به شکل زیر است.
1 |
|
2 |
lang="en">
|
3 |
|
4 |
charset="utf-8">
|
5 |
name="viewport" content="width=device-width, initial-scale=1">
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
id="current_page" value="1" type="number"/>
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
2. دریافت PDF.js
اکنون که یک رابط کاربری بدون شک برای نمایشگر PDF جاوا اسکریپت ما آماده است، بیایید PDF.js را به صفحه وب خود اضافه کنیم. از آنجایی که آخرین نسخه کتابخانه در CDNJS موجود است، می‌توانیم این کار را با افزودن خطوط زیر در انتهای صفحه وب انجام دهیم.
1 |
|
2 |
src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"> |
3 |
|
اگر ترجیح می دهید از نسخه محلی کتابخانه استفاده کنید، می توانید آن را از مخزن pdfjs-dist دانلود کنید.
3. بارگذاری یک فایل PDF
قبل از شروع بارگذاری یک فایل PDF، بیایید یک شی جاوا اسکریپت ساده ایجاد کنیم تا وضعیت نمایشگر PDF خود را در JS ذخیره کند. در داخل آن، ما سه مورد خواهیم داشت: ارجاع به خود فایل PDF، نمایه صفحه فعلی و سطح بزرگنمایی فعلی.
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" value="1" type="number"/>
|
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 به auto. این ویژگی، در صورت لزوم، نوارهای اسکرول را به آن اضافه می کند
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. تغییر صفحه فعلی
نمایشگر پی دی اف جاوا اسکریپت ما در حال حاضر قادر است تنها صفحه اول هر فایل پی دی اف داده شده به آن را نشان دهد. برای اینکه به کاربران اجازه دهیم صفحه در حال ارائه را تغییر دهند، اکنون باید شنوندگان رویداد کلیک را به صفحه اضافه کنیم go_previous و go_next دکمه هایی که قبلا ایجاد کردیم
در داخل شنونده رویداد از go_previous را فشار دهید، ما باید آن را کاهش دهیم currentPage ویژگی شی state ما، مطمئن شویم که زیر آن قرار نگیرد 1. پس از انجام این کار، می توانیم به سادگی با آن تماس بگیریم render() دوباره برای رندر صفحه جدید عمل کنید.
علاوه بر این، باید مقدار the را به روز کنیم current_page فیلد متنی به طوری که شماره صفحه جدید را نمایش دهد. کد زیر به شما نشان می دهد که چگونه:
1
document.getElementById('go_previous')
2
.addEventListener('click', (e) => {
3
if(myState.pdf == null|| myState.currentPage == 1)
4
return;
5
6
myState.currentPage -= 1;
7
document.getElementById("current_page").value = myState.currentPage;
8
render();
9
});
به طور مشابه، در داخل شنونده رویداد از go_next را فشار دهید، ما باید آن را افزایش دهیم currentPage ویژگی، در حالی که اطمینان حاصل می کنیم که از تعداد صفحات موجود در فایل PDF تجاوز نمی کند، که می توانیم با استفاده از numPages دارایی از _pdfInfo شی
1
document.getElementById('go_next')
2
.addEventListener('click', (e) => {
3
if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages)
4
return;
5
6
myState.currentPage += 1;
7
document.getElementById("current_page").value = myState.currentPage;
8
render();
9
});
در نهایت، ما باید یک شنونده رویداد مطبوعاتی کلیدی را به آن اضافه کنیم current_page فیلد متنی به طوری که کاربران می توانند مستقیماً با تایپ شماره صفحه و زدن آن به هر صفحه ای که می خواهند بپرند وارد کنید کلید در داخل شنونده رویداد، باید مطمئن شویم که عددی که کاربر وارد کرده است هم بزرگتر از صفر و هم کوچکتر یا مساوی باشد. numPages دارایی
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
});
نمایشگر PDF ما در جاوا اسکریپت اکنون می تواند هر صفحه ای از فایل PDF را نمایش دهد.
6. تغییر سطح بزرگنمایی
چون ما render() تابع قبلاً از zoom ویژگی شی state در حین رندر کردن صفحه، تنظیم سطح بزرگنمایی به آسانی افزایش یا کاهش ویژگی و فراخوانی تابع است.
در داخل شنونده رویداد روی کلیک zoom_in را فشار دهید، بیایید آن را افزایش دهیم zoom دارایی توسط 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
});
و در داخل شنونده رویداد روی کلیک zoom_out را فشار دهید، بیایید مقدار را کاهش دهیم zoom دارایی توسط 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
});
شما آزاد هستید که کرانهای بالا و پایین را به آن اضافه کنید zoom دارایی است، اما آنها مورد نیاز نیستند.
این همان چیزی است که وقتی همه چیز در کنار هم قرار می گیرد به نظر می رسد.
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
height: 450px;
16
overflow: auto;
17
}
18
19
#canvas_container {
20
background: #333;
21
text-align: center;
22
border: solid 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" value="1" type="number"/>
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
function render() {
59
myState.pdf.getPage(myState.currentPage).then((page) => {
60
61
var canvas = document.getElementById("pdf_renderer");
62
var ctx = canvas.getContext('2d');
63
64
var viewport = page.getViewport(myState.zoom);
65
66
canvas.width = viewport.width;
67
canvas.height = viewport.height;
68
69
page.render({
70
canvasContext: ctx,
71
viewport: viewport
72
});
73
});
74
}
75
76
document.getElementById('go_previous').addEventListener('click', (e) => {
77
if(myState.pdf == null || myState.currentPage == 1)
78
return;
79
myState.currentPage -= 1;
80
document.getElementById("current_page").value = myState.currentPage;
81
render();
82
});
83
84
document.getElementById('go_next').addEventListener('click', (e) => {
85
if(myState.pdf == null || myState.currentPage > myState.pdf._pdfInfo.numPages)
86
return;
87
myState.currentPage += 1;
88
document.getElementById("current_page").value = myState.currentPage;
89
render();
90
});
91
92
document.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
document.getElementById('current_page').valueAsNumber;
102
103
if(desiredPage >= 1 && desiredPage <= myState.pdf._pdfInfo.numPages) {
104
myState.currentPage = desiredPage;
105
document.getElementById("current_page").value = desiredPage;
106
render();
107
}
108
}
109
});
110
111
document.getElementById('zoom_in').addEventListener('click', (e) => {
112
if(myState.pdf == null) return;
113
myState.zoom += 0.5;
114
render();
115
});
116
117
document.getElementById('zoom_out').addEventListener('click', (e) => {
118
if(myState.pdf == null) return;
119
myState.zoom -= 0.5;
120
render();
121
});
122
123
124
نمایشگر PDF ما در جاوا اسکریپت آماده است. اگر دوباره صفحه وب را بازخوانی کنید، باید بتوانید تمام صفحات موجود در سند PDF را در جاوا اسکریپت مشاهده کنید و همچنین آنها را بزرگنمایی یا کوچکنمایی کنید.
تبریک می گویم! شما یاد گرفته اید که یک نمایشگر برای آن ایجاد کنید اسناد PDF در جاوا اسکریپت!
اکنون می دانید که چگونه از PDF.js برای ایجاد یک نمایشگر پی دی اف جاوا اسکریپت سفارشی برای وب سایت خود استفاده کنید. با نمایشگر جدید خود برای اسناد PDF در جاوا اسکریپت، می‌توانید با اطمینان تجربه کاربری بی‌نظیری را در حین نمایش بروشورها، برگه‌های سفید، فرم‌ها و سایر اسنادی که عموماً به عنوان نسخه‌های چاپی توزیع می‌شوند، ارائه دهید.
می‌توانید درباره PDF.js در مخزن رسمی GitHub اطلاعات بیشتری کسب کنید.
منبع: https://webdesign.tutsplus.com/how-to-create-a-pdf-viewer-in-javascript--cms-32505t