Làm cách nào để nhúng PDF vào Bootstrap?
|
Đối với những người muốn có một cách chuyên nghiệp và được thiết kế đẹp mắt để hiển thị tài liệu trên trang web của họ, việc có thể nhúng mã pdf html vào trang web của họ sẽ cung cấp cho họ khả năng hiển thị tài liệu tương tác cho người dùng sử dụng. Nhiều công ty và cá nhân có thể hưởng lợi từ việc có thể nhúng pdf vào trong mã html cho trang web của họ, thay vì hiển thị tài liệu truyền thống. Nhúng pdf vào mã html cho phép hiển thị các tài liệu pdf một cách thuận tiện hơn mà trước đây có thể không tương thích với các trình duyệt Show
Chắc chắn sẽ gây khó khăn nếu bạn chuyển hướng người xem của mình đến ứng dụng của bên thứ ba để hiển thị tài liệu pdf của bạn (chẳng hạn như liên kết ổ đĩa) và người dùng hiện đang rời khỏi trang web của bạn. Xác suất quay lại của anh ta chắc chắn sẽ giảm nếu sử dụng phương pháp này Vì vậy, hãy tìm hiểu cách nhúng tài liệu pdf vào trang web của bạn một cách hiệu quả và hiển thị chúng ở đó Đối với hướng dẫn, tôi sẽ sử dụng một tài liệu trực tuyến, đó là sơ yếu lý lịch của tôi Được rồi đi thôi Phương pháp 1. Sử dụng thẻ đối tượngPhương pháp đầu tiên để nhúng pdf vào html là sử dụng thẻ đối tượng trong html. Đối tượng xác định đối tượng sẽ được nhúng trong trang, tất nhiên trong trường hợp này là tệp pdf sẽ được hiển thị trên trang web. Thẻ đối tượng không chỉ được sử dụng để nhúng mã pdf html vào trang web; . Đối tượng nhúng thẻ pdf html có thể được sử dụng để đính kèm tài liệu tương tác Hãy xem mã trông như thế nào
Phương pháp 2. Sử dụng iframePhương pháp thứ hai để nhúng pdf vào trang web HTML là thẻ iframe
Phương pháp 3. Sử dụng thẻ nhúngThẻ nhúng không được sử dụng thường xuyên như các thẻ trước để nhúng mã pdf html vào website vì khi nó được dùng để nhúng mã pdf html vào website nếu trình duyệt không hỗ trợ file PDF thì người sử dụng website . nhúng được sử dụng để nhúng mã pdf html khi không cần cung cấp cơ chế cho nội dung dự phòng trong mã nhúng pdf html Tương tự như các phương pháp trước, cú pháp có thể được hiểu bằng ví dụ này Nên trông như thế này Phương pháp 4. Sử dụng PDF. jsCác thư viện bên ngoài cũng có thể được sử dụng để nhúng các tệp pdf vào các trang web html. Chúng thường được sử dụng cho các tính năng tùy chỉnh PDF. js là một thư viện JavaScript được viết bởi Mozilla. Vì nó triển khai kết xuất PDF bằng vanilla JavaScript, nên nó có khả năng tương thích giữa nhiều trình duyệt và không yêu cầu cài đặt thêm plugin Với PDF. js, PDF được tải xuống qua AJAX và được hiển thị trên phần tử canvas bằng các lệnh vẽ gốc. Để cải thiện hiệu suất, rất nhiều công việc xử lý xảy ra trong web worker Để bắt đầu, tất cả những gì bạn cần làm là tải xuống bản sao PDF gần đây. js và bạn đã sẵn sàng (Đối với hướng dẫn này, hãy chọn phiên bản ổn định) Khi bạn đã tải xuống tệp, hãy giải nén nó. Bạn sẽ thấy hai thư mục, cụ thể là Tệp HTML cần trỏ đến pdf. js và mã ứng dụng tùy chỉnh của chúng tôi (đơn giản. js). Chúng tôi cũng tạo một phần tử 'canvas' mà chúng tôi muốn trang đầu tiên của PDF được hiển thị thành Bây giờ tất cả những gì còn thiếu là đơn giản của chúng tôi. mã js tận dụng PDF. js API để hiển thị trang đầu tiên Bây giờ chúng ta có thể làm việc trên sự tích hợp. Để thực hiện việc này, chúng tôi tạo một tệp HTML đơn giản sẽ bao gồm trình xem qua khung nội tuyến. Điều này cho phép chúng tôi nhúng trình xem vào một trang web hiện có rất dễ dàng. Trình xem được định cấu hình thông qua các tham số URL, bạn có thể tìm thấy danh sách các tham số này tại đây. Ví dụ của chúng tôi, chúng tôi sẽ chỉ định cấu hình tệp PDF nguồn. Đối với các tính năng nâng cao hơn (như lưu lại tài liệu PDF vào máy chủ web của bạn), bạn chỉ cần bắt đầu sửa đổi trình xem. tệp html được cung cấp bởi PDF. js Làm cách nào để hiển thị PDF trong Bootstrap?Xem và hiển thị tệp PDF trong trình duyệt. . thuộc tính tiêu đề, trở thành nội dung của chú giải công cụ thuộc tính data-bs-toggle="tooltip" thuộc tính data-bs-placement="top" để định vị chú giải công cụ ở trên cùng. Bạn cũng có thể định vị chú giải công cụ ở dưới cùng, bên trái và bên phải Làm cách nào để hiển thị PDF trong cửa sổ bật lên phương thức Bootstrap?"Hiển thị PDF trong chế độ xem trước cửa sổ bật lên bằng Bootstrap Easy Modal Plugin" . Hiển thị PDF trong chế độ xem trước cửa sổ bật lên bằng Bootstrap Easy Modal PluginBạn có thể nhúng PDF không?Thật may mắn, Adobe đã phát hành Adobe PDF Embed API (PDF Embed) , một cách dễ dàng để bạn kết hợp PDF trực tiếp vào trang web của mình . Nó hoàn toàn miễn phí để sử dụng và hiển thị phía máy khách trong ứng dụng web của bạn. Bạn không cần phải học một thư viện PDF phức tạp và nó cực kỳ dễ thực hiện.
Bạn có thể hiển thị tệp PDF trong iframe không?Bài Viết Liên Quan
Bản quyền © 2021 Học Tốt Inc.
|
