Thư viện xem PDF JavaScript 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à một thư viện JavaScript mã nguồn mở và miễn phí được phát triển để nhúng các tài liệu PDF vào các 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. Phần tử nhúng sau đó sẽ hiển thị tài liệu PDF. PDFObject không phải là một trình hiển thị; thay vào đó, nó tập trung vào việc tạo ra phần tử nhúng và đặt nó vào trong HTML. Nó có thể tạo ra các phần tử nhúng để hiển thị 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, do đó trong trường hợp trình duyệt không hỗ trợ nhúng 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 đến PDF hoặc bất kỳ logic thay thế nào khác khi cần.
- Tích hợp PDF.js: PDFObject cung cấp tùy chọn tích hợp với PDF.js, cho phép các nhà phát triển nhúng PDF bất kể trình xem PDF mặc định của trình duyệt là gì. 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 các nhà phát triển chỉ định các 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 thiết lập cụ thể khác của Adobe. Tất cả các tham số này có thể được tìm thấ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 với Xác minh hỗ trợ trình duyệt
Chúng ta có thể nhúng một tài liệu PDF vào HTML bằng thư viện PDFObject. Ban đầu, chúng ta 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 thức supportsPDFs của thư viện PDFObject. Nếu trả về true cho biết trình duyệt hỗ trợ nhúng PDF vào HTML thì chúng ta sẽ nhúng PDF vào HTML bằng phương thức embed("document_name.pdf","#elementid"). Hàm này sẽ nhúng PDF vào một phần tử cụ thể trong HTML. Đối với nhúng PDF kích thước đầy đủ, chúng ta sẽ không đề cập đến bất kỳ id phần tử nào và sẽ gọi phương thức là embed("document_name.pdf"). Tuy nhiên, nếu trả về false cho biết trình duyệt không hỗ trợ nhúng PDF vào HTML thì chúng ta sẽ chuyển sang logic thay thế khác khi cần. Kiểm tra đoạn mã bên dưới để biết chi tiết:
Đầu ra
Đầ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 ta có thể thiết lập cơ chế dự phòng khi nhúng PDF vào trang web bằng PDFObject, cơ chế này được kích hoạt khi trình duyệt không hỗ trợ nhúng PDF vào HTML. PDFObject sử dụng tham số có tên là fallbackLink, tham số này chứa logic thay thế khi gọi hàm embed. Vì vậy, nếu trình duyệt không hỗ trợ nhúng PDF, mã có trong fallbackLink sẽ được thực thi trong phần tử div được chỉ định. Kiểm tra đoạn mã bên dưới để 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ị bởi 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 PDF vào HTML.
Nhúng PDF với Adobe's PDF Open Parameters
Chúng ta có thể nhúng PDF cùng với một số tham số mở bằng thư viện PDFObject. Chúng ta sẽ sử dụng phương thức PDFObject.embed("myfile.pdf", "#my-container", {pdfOpenParams: { parameters }}) để nhúng tài liệu PDF vào HTML cùng với các tham số mở. Các Tham số mở PDF này bao gồm các tính năng như mở PDF và cuộn đến số trang cụ thể. Kiểm tra đoạn mã bên dưới để 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 khiến 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 PDF vào HTML nhưng nó cung cấp một phương pháp thay thế để hiển thị 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. Để thực hiện, chúng ta sẽ phải thiết lập PDF.js trên máy chủ của mình và sau đó chúng ta sẽ truyền tham số ForcePDFJS: true và PDFJS_URL: path/to/viewer.html/in/pdf.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 tạo một máy chủ chứa thư viện PDF.js để 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 kết xuất 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 đối với các thành phần 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ợ thành phần nhúng nhưng thư viện có các tính năng để giải quyết các sự cố như vậy thông qua việc hỗ trợ phát hiện thành phần nhúng và cơ chế dự phòng. Chúng ta cũng có thể kết xuất PDF trong các trình duyệt không hỗ trợ các thành phần 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à kết xuất tài liệu PDF trong các trang web.
