Trong bài viết này [đọc trong năm phút], bạn sẽ tìm hiểu về hai cách đơn giản [và miễn phí]. ] phương pháp hiển thị tệp PDF trong trình duyệt và cách bạn có thể nhanh chóng triển khai chúng trên trang web của mình
Hiển thị PDF trên trình duyệt gốc
Vì PDF là định dạng được sử dụng rộng rãi nên tất cả các trình duyệt hiện đại đều có hỗ trợ PDF tích hợp. Chúng ta có thể tận dụng lợi thế này bằng cách sử dụng các phần tử HTML để nhúng trực tiếp tệp PDF vào trang web của mình, như thế này
Đây là mã
Tôi đã sử dụng một URL cho các giá trị data
và src
. Các điểm này trỏ tới tệp PDF mà tôi muốn mở từ một URL. Nhưng thay vào đó, tôi có thể mở tệp cục bộ bằng cách hoán đổi URL cho đường dẫn tệp [e. g. /path/to/file.pdf
]
Giao diện người dùng của trình xem PDF sẽ hơi khác một chút tùy thuộc vào trình duyệt của bạn
Trình xem PDF được nhúng vào trang web trong ChromeTrình xem PDF được nhúng vào trang web trong SafariPhương pháp này sẽ hoạt động trong tất cả các phiên bản Chrome, Safari, Firefox và Edge hiện đại dành cho máy tính để bàn và thiết bị di động. [Nó sẽ không hoạt động trong Internet Explorer. ] Nếu bạn cần hỗ trợ Internet Explorer hoặc tùy chỉnh giao diện người dùng, bạn nên xem xét phương pháp tiếp theo -- PDF. kết xuất js.
Nhúng PDF vào HTML với PDF miễn phí. Trình xem nhanh js
PDF. js Express Viewer là một tệp PDF miễn phí. js bao bọc giao diện người dùng dựa trên React hiện đại xung quanh PDF nguồn mở. công cụ kết xuất js. PDF. js ban đầu được phát triển bởi Mozilla và được duy trì bởi một cộng đồng mã nguồn mở. PDF. js Express Viewer cho phép bạn hiển thị các tệp PDF bên trong một trang web bằng cách sử dụng JavaScript thay vì hỗ trợ PDF tích hợp của trình duyệt
Lợi ích của PDF. js Express Viewer so với kết xuất trình duyệt gốc là
- Hỗ trợ Internet Explorer [ngoài tất cả các trình duyệt hiện đại]
- Giao diện người dùng nhất quán và trải nghiệm người dùng trên các trình duyệt
- Giao diện người dùng có thể tùy chỉnh hơn [ví dụ: xóa nút tải xuống]
PDF. js Express Viewer HTML Ví dụ
Đây là những gì chúng ta sẽ làm sau khi làm theo hướng dẫn này
Thêm PDF. js Express Viewer vào trang web của bạn là một quy trình 3 bước dễ dàng. Ở đây chúng tôi sẽ thực hiện tích hợp thủ công, tuy nhiên, chúng tôi có hướng dẫn tích hợp PDF. js Express Viewer với nhiều framework, bao gồm React, Angular, Vue, v.v. Bạn có thể tìm thấy danh sách đầy đủ các hướng dẫn về khung tại đây
Bước 1 - Tải xuống PDF. Trình xem nhanh js
Bạn có thể bấm vào đây để tải PDF. Trình xem nhanh js
Lưu ý rằng để sử dụng PDF. js Express Viewer, bạn sẽ cần một khóa cấp phép miễn phí. Vui lòng lấy khóa Trình xem miễn phí tại đây nếu bạn chưa có
- Di chuyển thư mục
PDF.js Express Viewer
đã giải nén vào thư mục dự án của bạn
Sau khi bạn có các tệp, hãy tạo một trang web
html
mới trong cùng thư mục dự án. Gọi nó làindex.html
và dán cái này vào bên trong
Để nhập PDF. js Express Viewer dưới dạng mô-đun CommonJS, vui lòng tham khảo hướng dẫn này để tích hợp với NPM
Khi bạn đã hoàn thành việc này, một thư mục dự án ví dụ có thể trông giống như thế này
Trong thư mục mẫu này, bạn có thể thêm các thư mục. hình ảnh, tập lệnh và kiểu để bao gồm bất kỳ tài nguyên bổ sung nào bạn muốn có trên trang web của mình. Tuy nhiên, đối với dự án ví dụ này, chỉ cần có thư mục lib
đã giải nén và tệp index.html
mà chúng ta vừa tạo ở bước trên
- Để khởi tạo PDF. js Express Web Viewer, hãy thêm tập lệnh này vào
body
sau phần khai báo divviewer
Cách dễ nhất để chạy dự án này là với src
0. Để làm như vậy, hãy chắc chắn rằng bạn có Node. js đã cài đặt
Tiếp theo, mở thiết bị đầu cuối của bạn và cài đặt src
0 bằng lệnh sau
Sau khi cài đặt, điều hướng đến thư mục gốc của trang web của bạn trong thiết bị đầu cuối và chạy lệnh sau
Sau khi chạy lệnh đó, hãy truy cập trình duyệt của bạn và nhập localhost. 8080. Sau đó, bạn sẽ thấy như sau
Bước 3 - Sử dụng PDF. js Express Viewer API để tùy chỉnh trình xem
Để sử dụng thêm PDF. js Express API, bạn có thể thêm lệnh gọi API trong phần gọi lại của PDF. hàm tạo js Express. Ví dụ: để thay đổi chủ đề của PDF. js Express sang bóng tối, bạn có thể thêm
Làm mới trang ứng dụng của bạn [src
2] và bạn sẽ thấy chủ đề đã thay đổi
Phần kết luận
Chúng tôi hy vọng điều này là hữu ích. Bạn cũng có thể xem phần mở rộng chức năng của PDF. js Express Viewer với chú thích PDF, điền biểu mẫu và ký bên trong ứng dụng web của bạn