Thư viện trình xem PDF JavaScript mã nguồn mở
Thư viện JavaScript mã nguồn mở và miễn phí để xem tài liệu PDF.
PDFObject là gì?
PDFObject là thư viện JavaScript mã nguồn mở và miễn phí được phát triển để nhúng tài liệu PDF vào trang web. Nó hoạt động bằng cách tạo ra một phần tử nhúng HTML và sau đó tích hợp nó vào cấu trúc HTML. Sau đó, phần tử nhúng sẽ hiển thị tài liệu PDF. PDFObject bản thân nó không phải là một trình kết xuất; thay vào đó nó tập trung vào việc tạo phần tử nhúng và đặt nó trong HTML. Nó có thể tạo các phần tử nhúng để hiển thị tệp PDF ở kích thước đầy đủ hoặc trong các phần được chỉ định của trang web.
Sau đây là một số tính năng chính của PDFObject:
- Cơ chế dự phòng: PDFObject có cơ chế dự phòng nên trong trường hợp trình duyệt không hỗ trợ nhúng tệp PDF, PDFObject sẽ tự động kích hoạt logic dự phòng cho phép các nhà phát triển cung cấp liên kết tới tệp PDF hoặc bất kỳ logic thay thế nào khác nếu cần .
- Tích hợp PDF.js: PDFObject cung cấp khả năng tích hợp tùy chọn với PDF.js, cho phép nhà phát triển nhúng tệp PDF bất kể tệp PDF mặc định của trình duyệt là gì người xem. Tính năng này hữu ích khi trình duyệt không hỗ trợ nhúng tài liệu PDF vào HTML.
- Tham số mở PDF: PDFObject hỗ trợ Tham số mở PDF độc quyền của Adobe cho phép nhà phát triển chỉ định tham số để hiển thị PDF. Điều này bao gồm các tùy chọn như chế độ xem và các cài đặt dành riêng cho Adobe khác. Bạn có thể tìm thấy tất cả các thông số này tại đây.
Bắt đầu với PDFObject
Chúng ta có thể tải xuống thư viện PDFObject bằng mô-đun npm:
Cài đặt bằng NPM
npm i pdfobject
Nhúng PDF vào HTML bằng xác minh hỗ trợ trình duyệt
Chúng ta có thể nhúng tài liệu PDF vào HTML bằng thư viện PDFObject. Ban đầu, chúng tôi sẽ kiểm tra xem trình duyệt có hỗ trợ nhúng tài liệu PDF vào HTML hay không bằng phương pháp supportsPDFs của thư viện PDFObject. Nếu kết quả trả về là true cho biết rằng nó hỗ trợ nhúng PDF vào HTML thì chúng tôi sẽ nhúng tệp PDF vào HTML bằng phương thức embed("document_name.pdf","#elementid"). Hàm này sẽ nhúng tệp PDF vào một thành phần cụ thể trong HTML. Để nhúng PDF kích thước đầy đủ, chúng tôi sẽ không đề cập đến bất kỳ id thành phần nào và sẽ gọi phương thức này là embed("document_name.pdf"). Tuy nhiên, nếu nó trả về sai cho biết rằng nó không hỗ trợ nhúng PDF vào HTML thì chúng tôi sẽ chuyển sang logic thay thế khác nếu cần. Kiểm tra đoạn mã dưới đây để biết chi tiết:
đầu ra
Kết quả đầu ra sau đây hiển thị tài liệu PDF được nhúng trong HTML:
Tạo cơ chế dự phòng
Chúng tôi có thể thiết lập cơ chế dự phòng trong khi nhúng tệp PDF vào trang web bằng cách sử dụng PDFObject được kích hoạt khi trình duyệt không hỗ trợ nhúng tệp PDF vào HTML. PDFObject sử dụng tham số có tên fallbackLink chứa logic thay thế trong khi gọi hàm embed. Vì vậy, nếu trình duyệt không hỗ trợ nhúng tệp PDF thì mã có trong fallbackLink sẽ được thực thi trong phần tử div được chỉ định. Kiểm tra đoạn mã dưới đây để biết chi tiết:
đầu ra
Ảnh chụp màn hình đầu ra hiển thị nội dung được hiển thị theo cơ chế dự phòng. Cơ chế dự phòng được kích hoạt khi trình duyệt không hỗ trợ nhúng tệp PDF vào HTML.
Nhúng PDF với các tham số mở PDF của Adobe
Chúng tôi có thể nhúng các tệp PDF cùng với một số tham số mở bằng thư viện PDFObject. Chúng tôi sẽ sử dụng phương thức PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { tham số }}) để nhúng tài liệu PDF vào HTML cùng với các tham số mở . Những Thông số mở PDF này bao gồm các tính năng như mở tệp PDF và cuộn đến một số trang cụ thể. Kiểm tra đoạn mã dưới đây để biết chi tiết:
đầu ra
Ảnh chụp màn hình sau đây hiển thị tài liệu PDF được nhúng trong HTML với các tham số bổ sung giúp phần tử nhúng cuộn đến trang số 3 sau khi hiển thị:
Nhúng PDF bằng cách tích hợp PDF.js
Như chúng ta biết PDFObject phụ thuộc vào sự hỗ trợ của trình duyệt để nhúng tệp PDF vào HTML nhưng nó cung cấp một phương pháp thay thế để hiển thị tệp PDF nếu trình duyệt không hỗ trợ. Phương pháp thay thế là tích hợp PDF.js với PDFObject. Để làm điều đó, chúng tôi sẽ phải thiết lập PDF.js trên máy chủ của mình và sau đó chúng tôi sẽ chuyển ForcePDFJS: true và PDFJS_URL: path/to/viewer.html/in/pdf tham số .js cho hàm embed.
Lưu ý: Trong đoạn mã ví dụ bên dưới, chúng tôi đã tạo và khởi chạy một máy chủ chứa thư viện PDF.js nên http://localhost:8888 trỏ đến thư viện PDF.js.
đầu ra
Ảnh chụp màn hình sau đây hiển thị tài liệu PDF được hiển thị bằng cách tích hợp PDFObject với PDF.js:
Phần kết luận
Tóm lại, PDFObject là một thư viện JavaScript dễ sử dụng để nhúng tài liệu PDF vào HTML. Mặc dù nó không hoạt động như một trình kết xuất và dựa vào sự hỗ trợ của trình duyệt cho các phần tử nhúng có thể gây ra các sự cố như giao diện người dùng bị hỏng trong các trình duyệt không hỗ trợ phần tử nhúng nhưng thư viện có các tính năng để giải quyết các vấn đề đó thông qua tính năng phát hiện hỗ trợ cho phần tử nhúng và cơ chế dự phòng. Chúng tôi cũng có thể hiển thị tệp PDF trong các trình duyệt không hỗ trợ các phần tử nhúng bằng cách tích hợp PDF.js với PDFObject. Bất chấp những hạn chế của nó, PDFObject nổi bật như một công cụ có giá trị để nhúng và hiển thị tài liệu PDF trong các trang web.
