Làm cách nào để hiển thị PDF trong HTML mà không cần tải xuống?

Trong bài viết này, chúng ta sẽ tìm hiểu cách nhúng tệp PDF vào tài liệu HTML, cùng với việc biết cách triển khai chúng thông qua các ví dụ. Đôi khi, bạn có thể muốn chèn tệp PDF vào tài liệu hoặc mã HTML để làm cho nội dung tương tác hơn. Bởi vì các định dạng rất khác nhau, không dễ để hoàn thành nhiệm vụ.  

Để học cách thêm file PDF vào code HTML, bạn cần biết cách convert file bằng phần mềm PDF, đây là kiến ​​thức tiên quyết. Bố cục tĩnh của PDF khiến nó không tương thích với thiết kế đáp ứng của HTML. Để chèn PDF vào HTML, trước tiên chúng ta phải chuyển đổi tệp. Một cách khác là nhúng mã PDF HTML vào một trang web để làm cho nó tương tác. Các phương pháp nhúng sau đây có thể được sử dụng để thêm PDF vào tệp HTML

• Sử dụng thẻ đối tượng
• Sử dụng iframe
• Sử dụng thẻ nhúng

Chúng tôi sẽ khám phá và hiểu chi tiết các phương pháp này thông qua việc triển khai chúng

Phương pháp 1. Sử dụng thẻ đối tượng

Thẻ đối tượng HTML là cách đầu tiên để nhúng tệp PDF. Trong ví dụ dưới đây, tệp pdf sẽ được hiển thị trên một trang web, là một đối tượng

Ngoài việc nhúng tệp pdf vào trang web, thẻ đối tượng có thể nhúng các ứng dụng ActiveX, Flash, video, âm thanh và Java. Các tài liệu tương tác có thể được đính kèm vào một đối tượng được nhúng bằng thẻ HTML. Nó có thể được hiển thị theo nhu cầu của bạn trên màn hình bằng cách sử dụng các thuộc tính chiều cao và chiều rộng của đối tượng

ví dụ 1. Ví dụ này mô tả việc nhúng tệp PDF vào HTML bằng cách sử dụng Thẻ đối tượng

HTML

    6>7>6>

html5_______1__________ 2  3html9

 5

 6_______4_______7html9 9

 6_______1_______1_______2_______9

đầu ra

Sử dụng thẻ đối tượng

Phương pháp 2. Sử dụng iframe

Sử dụng thẻ iframe là cách thứ hai để nhúng tệp pdf vào trang web HTML. Trong quá trình phát triển web, các nhà phát triển web sử dụng thẻ iframe để nhúng các tệp ở nhiều định dạng khác nhau và thậm chí các trang web khác trong một trang web. Do khả năng tương thích rộng rãi, thẻ iframe được sử dụng rộng rãi để nhúng pdf. Trình duyệt không hỗ trợ tài liệu PDF hoặc thẻ đối tượng cũng có thể sử dụng thẻ này để nhúng mã HTML pdf

ví dụ 2. Ví dụ này mô tả việc nhúng tệp PDF vào HTML bằng iframe

HTML

    66>

html5_______1__________