Hiển thị PDF trong div HTML

Đị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

 lang="en">

4

_______8

   charset="utf-8">

0

1

2

3

4

5

6

7

8

9

2

0

2

1

2

2

2

3

Tiếp theo, bên trong 

4

54, hãy tạo một phần tử 

4

55 có thể dùng làm vùng chứa cho trình xem PDF của chúng ta

1

2

5

2

9

3

2

9

Trọng tâm của trình xem JavaScript JavaScript của chúng tôi sẽ là phần tử HTML5 

4

56. 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ử 

4

55

1

____31

2

______33

3

2

9

Để 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

3

1

4

3

3

5

2

9

Để 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

 lang="en">

1

4

2

9

Ở cuối phần này, mã trang web trông như thế này

1

 lang="en">

5

2

 lang="en">

3

4

   charset="utf-8">

5

1

0

3

2

5

4

7

6

1

8

3

2

0

5

2

2

7

8

9

5

0

5

1

5

2

5

3

5

4

5

5

5

6

5

7

7

5

9

   charset="utf-8">

0

   charset="utf-8">

1

   charset="utf-8">

2

   charset="utf-8">

3

   charset="utf-8">

4

   charset="utf-8">

5

   charset="utf-8">

6

7

   charset="utf-8">

8

   charset="utf-8">

9

00

2

1

02

2

3

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 

4

58 của đối tượng 

4

59, chạy không đồng bộ

1

29____2

3

33

4

5

37

Lưu ý rằng phương thức 

4

58 sử dụng nội bộ một đối tượng 

4

61 để 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 

4

62 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 

4

63 để 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 

4

64 của đối tượng 

4

62 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 

4

66 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 

4

63 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 

4

63 của đối tượng 

4

69 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 

4

70, mà chúng ta có thể nhận được bằng cách gọi phương thức 

4

71. Bởi vì phương thức 

4

71 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 

4

73 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

 lang="en">

4

5

   charset="utf-8">

0

1

2

3

4

91

6

07

8

95

2

0

5

2

2

7

8

1

9

3

5

1

5

5

3

7

5

5

5

7

5

0

5

9

5

2

   charset="utf-8">

0

5

4

   charset="utf-8">

2

5

6

   charset="utf-8">

4

7

   charset="utf-8">

6

   charset="utf-8">

8

   charset="utf-8">

1

00

   charset="utf-8">

3

02

   charset="utf-8">

5

2

26

7

2

28

   charset="utf-8">

9

2

30

2

31

2

32

2

33

2

34

2

35

2

36

2

37

2

38

2

39

2

40

2

41

2

42

2

43

9

2

45

2

46

2

47

9

2

49

2

50

2

51

2

52

2

53

2

54

2

55

2

56

2

57

2

58

2

59

2

60

2

61

2

62

2

63

2

64

2

65

2

66

2

67

9

2

69

2

70

2

71____

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ử 

4

55, 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ẻ 

4

78 của trang web

1

2

97

2

2

99

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ử 

4

55 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ử 

4

55 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 

4

81 và 

4

82 mà chúng ta đã tạo trước đó

Bên trong trình xử lý sự kiện của nút 

4

81, chúng ta phải giảm thuộc tính 

4

66 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 

4

85. Sau khi làm như vậy, chúng ta chỉ cần gọi lại hàm 

4

63 để 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 

4

87 để 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 

4

82, chúng ta phải tăng thuộc tính 

4

66, đồ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 

4

90 của đối tượng 

4

91

1

39

2

_______323

3

43

4

27

5

2

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 

4

87 để 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 

4

90

1

57

2

59

3

61

4

5

65

0

67

2

4

71

6

73

8

75

2

0

77

2

2

79

8

81

9

83

5

1

2

52

5

3

2

42

5

5

21

5

7

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 

4

63 của chúng tôi đã sử dụng thuộc tính 

4

73 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 

4

96, hãy tăng thuộc tính 

4

73 lên 

4

98

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 

4

99, hãy giảm thuộc tính 

4

73 bằng 

4

98

1

3

06

2

23

3

61

4

3

12

5

3

14

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 

4

73, 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

 lang="en">

4

5

   charset="utf-8">

0

1

2

3

4

91

6

3

36

8

95

2

0

2

2

3

41

8

3

43

9

3

45

5

1

3

47

5

3

3

49

5

5

3

51

5

7

5

9

3

43

   charset="utf-8">

0

3

56

   charset="utf-8">

2

3

58

   charset="utf-8">

4

3

60

   charset="utf-8">

6

3

51

   charset="utf-8">

8

3

64

00

5

02

7

2

26

1

2

28

3

2

30

5

2

31

7

2

33

2

35

5

0

2

37

5

2

2

39

5

4

2

41

5

6

2

43

7

2

45

2

47

   charset="utf-8">

1

2

49

   charset="utf-8">

3

2

51

   charset="utf-8">

5

2

53

7

2

54

   charset="utf-8">

9

2

56

2

57

2

32

2

59

2

34

2

61

2

36

2

63

2

38

2

65

2

40

2

67

2

42

2

69

9

2

71__

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

Làm cách nào để hiển thị PDF trong div HTML?

Làm cách nào để nhúng PDF vào HTML?

Làm cách nào để hiển thị PDF trong HTML mà không cần tải xuống?

Chúng tôi có thể hiển thị PDF trong thẻ IMG không?