Đố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ẽ mang lại 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
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.
Trong trường hợp bạn muốn sử dụng tệp cục bộ, hãy thay thế liên kết bằng tên của tệp, tất nhiên là bằng đường dẫn thích hợp.
Được rồi đi thôi
Phương pháp 1. Sử dụng thẻ đối tượng
Phươ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
- Như đã thấy ở trên, thuộc tính dữ liệu của thẻ đối tượng được sử dụng để chỉ định tên/địa chỉ của tệp sẽ được hiển thị
- Hãy tạo một tệp HTML có tên là chỉ mục. html để kiểm tra điều này
PDF in HTML
- Bây giờ hãy mở chỉ mục. html trong trình duyệt của bạn và tệp pdf sẽ hiển thị trong đó
- Chúng tôi quan sát thấy rằng kích thước của tệp pdf mà chúng tôi nhúng là không phù hợp, vì vậy chúng tôi đã tạo kiểu cho phù hợp
- Trong ví dụ này, tôi sẽ trình bày cách hiển thị tệp pdf trong tất cả không gian có sẵn, bằng cách sử dụng -webkit-fill-available làm chiều cao và chiều rộng của đối tượng
- Mã cho đối tượng sẽ như sau cho điều đó
- Ngoài ra, tốt hơn hết là chỉ định định dạng tệp của dữ liệu trong khi sử dụng thẻ đối tượng để loại bỏ khả năng tương thích trình duyệt không chính xác
Phương pháp 2. Sử dụng iframe
Phương pháp thứ hai để nhúng pdf vào trang web HTML là thẻ iframe.
Thẻ iframe được các nhà phát triển web sử dụng rộng rãi để nhúng các tệp có định dạng khác nhau và thậm chí cả các trang web khác bên trong trang web có liên quan. Hầu hết các trình duyệt đều tương thích với việc nhúng thẻ mã pdf html này, đó là lý do tại sao thẻ này được sử dụng rộng rãi. Thẻ này được sử dụng để nhúng mã pdf html cũng có thể được sử dụng nếu trình duyệt không hỗ trợ tài liệu PDF hoặc thẻ đối tượng.
- Phương pháp sử dụng thẻ iframe để hiển thị pdf trong các trang web phải rõ ràng từ đoạn mã này
- Như có thể thấy trong đoạn mã trên, phương pháp sử dụng iframe và thẻ đối tượng khá giống nhau
- Thẻ dữ liệu được thay thế bằng thẻ src, tên viết tắt của nguồn, mặc dù dễ hiểu nhưng chỉ định nguồn của tệp sẽ được nhúng
- Tệp HTML phải có các nội dung sau
PDF in HTML
- Mở tệp trong trình duyệt của bạn và nó sẽ trông như thế này
- Nếu bạn để ý kỹ, trong khi sử dụng phương pháp này, một dòng có bóng sẽ xuất hiện trên đường viền của tệp được nhúng. Tệp được hiển thị trong vùng chứa, chính xác hơn là khung
Phương pháp 3. Sử dụng thẻ nhúng
Thẻ 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. js
Cá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.
Chúng ta hãy dùng thử với PDF. js.
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 trong 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]
Sau 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à
web và bản dựng.
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
PDF.js Example
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.
Ở đây, tôi giả định rằng bạn cần nhúng một tệp pdf có tên là test. pdf
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