Định dạng Tài liệu Di động, hay viết tắt là PDF, lý tưởng để chia sẻ tài liệu chứa nhiều văn bản và hình ảnh được định dạng chính xác, đặc biệt nếu chúng có khả năng được in hoặc đọc ngoại tuyến. Mặc dù hầu hết các trình duyệt hiện đại đều có thể hiển thị tệp PDF, nhưng chúng làm như vậy bằng cách sử dụng trình xem PDF chạy trong tab hoặc cửa sổ độc lập, buộc người dùng phải rời khỏi trang web của bạn
PDF. js là thư viện JavaScript mã nguồn mở cho phép bạn phân tích cú pháp và hiển thị tệp PDF ngay trong trang web của mình. Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng nó để tạo một trình xem JavaScript JavaScript tùy chỉnh hoàn chỉnh từ đầu
Nếu bạn đang thêm trình xem PDF vào trang web của mình, bạn cũng có thể quan tâm đến plugin Flipbook chuyên nghiệp. Sách lật JavaScript hiển thị nội dung của bạn ở dạng sách lật kỹ thuật số, sử dụng hiệu ứng lật trang, thu phóng và hỗ trợ nhiều loại nội dung
So sánh 7 plugin jQuery Flipbook tốt nhất [miễn phí và trả phí]
Ê-xơ-tê Va-ti
28 Thg 9 2021
1. Tạo giao diện người dùng
Hãy bắt đầu bằng cách tạo một trang web mới và thêm mã soạn sẵn HTML5 thông thường vào đó
1
2
3
4
_______8
0
1
2
3
4
5
6
7
8
9
20
21
22
23
Tiếp theo, bên trong
454, hãy tạo một phần tử
455 có thể dùng làm vùng chứa cho trình xem PDF của chúng ta
1
25
2
9
3
29
Trọng tâm của trình xem JavaScript JavaScript của chúng tôi sẽ là phần tử HTML5
456. Chúng tôi sẽ hiển thị các trang của tệp PDF của chúng tôi bên trong nó. Vì vậy, hãy thêm mã sau vào bên trong phần tử
455
1____31
2______33
3
29
Để giữ cho mọi thứ đơn giản, chúng tôi sẽ chỉ hiển thị một trang bên trong canvas tại bất kỳ thời điểm nào. Tuy nhiên, chúng tôi sẽ cho phép người dùng chuyển sang trang trước hoặc trang tiếp theo bằng cách nhấn nút. Ngoài ra, để hiển thị số trang hiện tại và cho phép người dùng chuyển đến bất kỳ trang nào họ muốn, giao diện của chúng tôi sẽ có trường nhập liệu
1
7
2
9
3
31
4
33
5
29
Để hỗ trợ các thao tác thu phóng, hãy thêm hai nút nữa vào giao diện. một để phóng to và một để thu nhỏ
1____47____2____49
3
1
4
29
Ở cuối phần này, mã trang web trông như thế này
1
5
2
3
4
5
1
0
3
2
5
4
7
6
1
8
3
20
5
22
7
8
9
50
51
52
53
54
55
56
57
7
59
0
1
2
3
4
5
6
7
8
9
00
21
02
23
2. Tải PDF. js
Bây giờ giao diện người dùng cơ bản cho trình xem JavaScript JavaScript của chúng tôi đã sẵn sàng, hãy thêm PDF. js vào trang web của chúng tôi. Vì phiên bản mới nhất của thư viện có sẵn trên CDNJS nên chúng tôi có thể làm như vậy bằng cách chỉ cần thêm các dòng sau vào cuối trang web
1
05
2
07
3
09
Nếu muốn sử dụng bản sao cục bộ của thư viện, bạn có thể tải xuống từ kho lưu trữ pdfjs-dist
3. Đang tải tệp PDF
Trước khi chúng tôi bắt đầu tải tệp PDF, hãy tạo một đối tượng JavaScript đơn giản để lưu trữ trạng thái của trình xem PDF của chúng tôi. Bên trong nó, chúng ta sẽ có ba mục. tham chiếu đến chính tệp PDF, chỉ mục trang hiện tại và mức thu phóng hiện tại
1
11
2
13
3
15
4
17
5
19
0
21
2
4
25
6
09
Tại thời điểm này, chúng tôi có thể tải tệp PDF của mình bằng cách gọi phương thức
458 của đối tượng
459, chạy không đồng bộ
1
29____2
3
33
4
5
37
Lưu ý rằng phương thức
458 sử dụng nội bộ một đối tượng
461 để tải tệp PDF. Điều này có nghĩa là tệp phải có trên máy chủ web của riêng bạn hoặc trên máy chủ cho phép yêu cầu trên nhiều nguồn gốc
Nếu bạn không có sẵn tệp PDF, bạn có thể lấy tệp tôi đang sử dụng từ Wikipedia
Khi tệp PDF đã được tải thành công, chúng ta có thể cập nhật thuộc tính
462 của đối tượng trạng thái của mình
1
39
Cuối cùng, thêm lệnh gọi hàm có tên
463 để trình xem PDF của chúng tôi tự động hiển thị trang đầu tiên của tệp PDF. Chúng ta sẽ xác định chức năng trong bước tiếp theo
1
41
4. Hiển thị trang
Bằng cách gọi phương thức
464 của đối tượng
462 và chuyển số trang cho nó, chúng ta có thể lấy tham chiếu đến bất kỳ trang nào trong tệp PDF. Bây giờ, hãy chuyển thuộc tính
466 của đối tượng trạng thái của chúng ta cho nó. Phương thức này cũng trả về một lời hứa, vì vậy chúng ta sẽ cần một hàm gọi lại để xử lý kết quả của nó
Theo đó, hãy tạo một hàm mới có tên
463 chứa mã sau
1
43
2
45
3
4
49
5
0
53
2
55
Để thực sự hiển thị một trang, chúng ta phải gọi phương thức
463 của đối tượng
469 có sẵn bên trong hàm gọi lại. Là đối số, phương thức mong đợi bối cảnh 2D của khung vẽ của chúng ta và một đối tượng
470, mà chúng ta có thể nhận được bằng cách gọi phương thức
471. Bởi vì phương thức
471 lấy mức thu phóng mong muốn làm đối số, nên chúng ta phải chuyển thuộc tính
473 của đối tượng trạng thái cho nó
1
57
2
59
3
4
63
Kích thước của khung nhìn phụ thuộc vào kích thước ban đầu của trang và mức thu phóng. Để đảm bảo rằng toàn bộ khung nhìn được hiển thị trên khung vẽ của chúng ta, bây giờ chúng ta phải thay đổi kích thước khung vẽ của mình để phù hợp với khung nhìn của khung nhìn. Đây là cách
1
65
2
67
Tại thời điểm này, chúng ta có thể tiếp tục và hiển thị trang
1
69____2
71
3
73
4
37
Đặt tất cả lại với nhau, toàn bộ mã nguồn trông như thế này
1
2
3
4
5
0
1
2
3
4
91
6
07
8
95
20
5
22
7
8
1
9
3
51
5
53
7
55
57
50
59
52
0
54
2
56
4
7
6
8
1
00
3
02
5
226
7
228
9
230
231
232
233
234
235
236
237
238
239
240
241
242
243
9
245
246
247
9
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
9
269
270
271____
Nếu bạn thử mở trang web trong trình duyệt, bây giờ bạn có thể xem trang đầu tiên của tệp PDF của mình
Bạn có thể nhận thấy rằng kích thước của trình xem PDF của chúng tôi hiện phụ thuộc vào kích thước của trang được hiển thị và mức thu phóng. Điều này không lý tưởng vì chúng tôi không muốn bố cục trang web của mình bị ảnh hưởng trong khi người dùng tương tác với trình xem PDF.
Để khắc phục điều này, tất cả những gì chúng ta cần làm là cung cấp một chiều rộng và chiều cao cố định cho phần tử ________ 655 đóng gói canvas của chúng ta và đặt thuộc tính CSS ________ 675 của nó thành ________ 676. Khi cần, thuộc tính này sẽ thêm các thanh cuộn vào phần tử
455, cho phép người dùng cuộn theo cả chiều ngang và chiều dọc
Thêm mã sau vào thẻ
478 của trang web
1
297
2
299
3
01
4
03
5
05
0
21
2
09
Tất nhiên, bạn có thể tự do thay đổi chiều rộng và chiều cao hoặc thậm chí sử dụng truy vấn phương tiện để làm cho phần tử
455 khớp với yêu cầu của bạn
Theo tùy chọn, bạn có thể bao gồm các quy tắc CSS sau đây để làm cho phần tử
455 có vẻ khác biệt hơn
1
11
2
13
3
15
4
17
5
55
Nếu bạn làm mới trang web bây giờ, bạn sẽ thấy một cái gì đó như thế này trên màn hình của bạn
5. Thay đổi trang hiện tại
Trình xem JavaScript JavaScript của chúng tôi hiện chỉ có khả năng hiển thị trang đầu tiên của bất kỳ tệp PDF nào được cung cấp cho nó. Để cho phép người dùng thay đổi trang đang được hiển thị, giờ đây, chúng ta phải thêm trình xử lý sự kiện nhấp chuột vào các nút
481 và
482 mà chúng ta đã tạo trước đó
Bên trong trình xử lý sự kiện của nút
481, chúng ta phải giảm thuộc tính
466 của đối tượng trạng thái của mình, đảm bảo rằng thuộc tính đó không giảm xuống dưới
485. Sau khi làm như vậy, chúng ta chỉ cần gọi lại hàm
463 để hiển thị trang mới
Ngoài ra, chúng tôi phải cập nhật giá trị của trường văn bản
487 để nó hiển thị số trang mới. Đoạn mã sau chỉ cho bạn cách
1
21
2_______323
3
25
4
27
5
29
0
31
2
33
4
35
6
37
Tương tự, bên trong trình xử lý sự kiện của nút
482, chúng ta phải tăng thuộc tính
466, đồng thời đảm bảo rằng thuộc tính đó không vượt quá số trang có trong tệp PDF mà chúng ta có thể xác định bằng cách sử dụng thuộc tính
490 của đối tượng
491
1
39
2_______323
3
43
4
27
5
262
0
49
2
33
4
35
6
37
Cuối cùng, chúng ta phải thêm trình xử lý sự kiện nhấn phím vào trường văn bản
487 để người dùng có thể chuyển trực tiếp đến bất kỳ trang nào họ muốn bằng cách chỉ cần nhập số trang và nhấn phím Enter . Bên trong trình lắng nghe sự kiện, chúng ta cần đảm bảo rằng số mà người dùng đã nhập vừa lớn hơn 0 vừa nhỏ hơn hoặc bằng thuộc tính
490
1
57
2
59
3
61
4
5
65
0
67
2
4
71
6
73
8
75
20
77
22
79
8
81
9
83
51
252
53
242
55
21
57
91
Trình xem PDF của chúng tôi hiện có thể hiển thị bất kỳ trang nào của tệp PDF
6. Thay đổi mức thu phóng
Vì hàm
463 của chúng tôi đã sử dụng thuộc tính
473 của đối tượng trạng thái trong khi hiển thị trang nên việc điều chỉnh mức thu phóng cũng dễ dàng như tăng hoặc giảm thuộc tính và gọi hàm
Bên trong trình xử lý sự kiện khi nhấp chuột của nút
496, hãy tăng thuộc tính
473 lên
498
1
93
2_______323
3
61
4
99
5
0
35
2
37
Và bên trong trình xử lý sự kiện khi nhấp chuột của nút
499, hãy giảm thuộc tính
473 bằng
498
1
306
2
23
3
61
4
312
5
314
0
35
2
37
Bạn có thể thêm các giới hạn trên và dưới cho thuộc tính
473, nhưng chúng không bắt buộc
Đây là những gì nó trông giống như khi tất cả được đặt lại với nhau
1
2
3
4
5
0
1
2
3
4
91
6
336
8
95
20
22
341
8
343
9
345
51
347
53
349
55
351
57
59
343
0
356
2
358
4
360
6
351
8
364
00
5
02
7
226
1
228
3
230
5
231
7
233
235
50
237
52
239
54
241
56
243
7
245
247
1
249
3
251
5
253
7
254
9
256
257
232
259
234
261
236
263
238
265
240
267
242
269
9
271__
Trình xem PDF của chúng tôi đã sẵn sàng. Nếu bạn làm mới lại trang web, bạn sẽ có thể xem tất cả các trang có trong tệp PDF và cũng có thể phóng to hoặc thu nhỏ chúng
Plugin Flipbook cao cấp từ CodeCanyon
Bạn cũng có thể quan tâm đến plugin sách lật chuyên nghiệp. Sách lật JavaScript hiển thị nội dung của bạn ở dạng sách lật kỹ thuật số, sử dụng hiệu ứng lật trang, thu phóng và hỗ trợ nhiều loại nội dung. CodeCanyon là thị trường dành cho tất cả các loại mã, bao gồm các tiện ích JavaScript cao cấp và plugin jQuery. Đó là nơi tốt nhất để tìm plugin jQuery flipbook