Hàng ngàn trang PDF có thể được tải ngay lập tức. Hỗ trợ ảo hóa và tải theo yêu cầu giúp giảm thời gian tải ban đầu cho các tệp PDF lớn hơn
Trình xem PDF cung cấp nhiều chú thích khác nhau bao gồm đánh dấu văn bản, hình dạng, con dấu, ghi chú dán, đo lường, văn bản tự do và viết tay
Trình xem PDF Cung cấp các chế độ tương tác lựa chọn và xoay trong các tài liệu PDF đã tải của bạn, giúp việc tương tác trở nên dễ dàng hơn
Bảng điều khiển nhận xét có thể được sử dụng để thêm nhận xét dưới dạng chú thích, trả lời nhận xét và trạng thái vào tệp PDF
Thêm chữ ký viết tay
Bạn có thể thêm chữ ký viết tay vào tệp PDF của mình. Tùy chỉnh chúng bằng cách thay đổi kích thước, di chuyển, xóa và lưu chúng. Họ tăng cường quá trình kỹ thuật số
Trình xem PDF được thiết kế để đáp ứng với thiết kế được tối ưu hóa cho máy tính để bàn, màn hình cảm ứng và điện thoại thông minh. Nó hoạt động tốt trên tất cả các điện thoại di động sử dụng hệ điều hành iOS, Android hoặc Windows
Thiết kế tiên tiến với một số chủ đề tích hợp sẵn, chẳng hạn như Fluent, Tailwind CSS, Bootstrap, Material và Fabric. Sử dụng công cụ Theme Studio trực tuyến để tùy chỉnh chủ đề dễ dàng
Toàn cầu hóa và địa phương hóa
Cho phép người dùng từ các ngôn ngữ khác nhau sử dụng thành phần bằng cách định dạng nội dung văn bản cho phù hợp với sở thích của họ
Tệp Định dạng Tài liệu Di động hoặc PDF là định dạng tệp chỉ đọc tiêu chuẩn được cung cấp trực tuyến. Các tệp PDF cho phép doanh nghiệp tạo tài liệu mà người đọc không thể thay đổi nếu không có mật khẩu quản trị viên. JavaScript có thể được sử dụng để mở tệp và đọc nội dung của tệp PDF. Sau đó, bạn có thể sử dụng dữ liệu để thêm vào cơ sở dữ liệu, ghi vào trang Web hoặc chỉnh sửa dữ liệu cho một tệp PDF khác
Tạo đối tượng tài liệu trỏ đến tệp JavaScript. Bạn tạo một đối tượng biến tài liệu để bạn có thể đọc hoặc chỉnh sửa tệp. Đoạn mã sau tạo biến trỏ đến tệp "pdffile. file PDF
var doc = new jsPDF["file pdf. pdf"];
Đọc dữ liệu trong tệp PDF. Bạn sử dụng chức năng "nội dung" có sẵn từ đối tượng "doc" mới để đọc nội dung. Thêm đoạn mã sau để trích xuất dữ liệu
nội dung = tài liệu. đầu ra[];
In kết quả ra màn hình. Để kiểm tra xem chức năng có thành công hay không, hãy in dữ liệu đã trích xuất bằng đoạn mã sau
Jaxer. phản ứng. addHeader['Bố trí nội dung', 'file đính kèm; filename=pdffile. pdf'];
Jaxer. phản ứng. addHeader['Kiểu nội dung', 'ứng dụng/pdf'];
Jaxer. phản ứng. setContents[nội dung];
Người giới thiệu
- Google. Tạo mã ví dụ tệp PDF
tiểu sử nhà văn
Jim Campbell đã là một kỹ sư máy tính trong hơn năm năm. Anh ấy xuất sắc trong lĩnh vực sửa chữa phần cứng, lập trình và khắc phục sự cố máy tính cũng như thiết kế phần mềm. Anh ấy hiện đang theo học tại Đại học Florida Atlantic, theo đuổi bằng thạc sĩ về kỹ thuật điện và máy tính, đồng thời trau dồi khả năng viết kỹ thuật của mình
Đị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
5
0
1
2
3
4
5
6
7
8
9
20
21_______2_______2_______2_______3
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_______4_______
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
1_______2_______
3_______4_______
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_______4_______
31
44_______3_______8_______
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
37
2
39_______4_______
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
41_______17
51_______19
0
21
2
1_______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_______6_______
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à truyề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 có chứa mã sau
1
43_______2_______
45_______4__________
________6____1_______49
5
1_______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_______1_______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_______4_______
73_______6_______1_______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________2____
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 chiều rộng và chiều cao cố định cho phần tử
455 đóng gói canvas của chúng ta và đặt thuộc tính CSS
475 của nó thành
476. 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_______4__________
01
43_______03
53_______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 mình
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_______4__________
15
43_______17_______8____1_______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ị, bây giờ 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 lắng nghe 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, đả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
23
3___
25
43_______27
53_______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 nó 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
23
3___
43
43_______27
52_______62
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 ta đã 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
23_______4__________
61
43_______99
51_______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ởi
498
1
306
2
23_______4__________
61_______6_______4_______12
54_______14
0
35
2
37
Bạn có thể tự do thêm giới hạn trên và giới hạn 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___
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. Đó là nơi tốt nhất để tìm plugin jQuery flipbook