Các cách nhúng và xem file PDF trong HTML/HTML5

Hướng dẫn nhúng (embed) và xem (Preview) file PDF trong HTML, HTML5.

Dưới đây là những phương pháp hiệu quả nhất để nhúng file PDF trong HTML và xem file PDF trên các trình duyệt phổ biến Chrome, Firefox, Safari, IE… Thứ tự ưu tiên sử dụng là từ trên xuống.

Sử dụng thư viện PDF.JS

Đây chắc chắn là phương pháp hiệu quả nhất, việc sử dụng thư viện của 1 bên thư ba, giúp tương thích tốt với nhiều trình duyệt.

• Demo: http://mozilla.github.com/pdf.js/web/viewer.html
• GitHub Source: https://github.com/mozilla/pdf.js
• Example: https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples

Sử dụng <embed> HTML Tag

Đây là cách nhanh và dễ dàng cũng như tương thích với nhiều trình duyệt.

Một ví dụ về nhúng file PDF bằng cách sử dụng thẻ <embed> để embed file PDF

<embed src="https://vinasupport.com/my_pdf_file.pdf" width="800" height="500" type="application/pdf">

Tuy nhiên từ tháng 1/2018, trình duyệt Chrome trên Android đã không còn hỗ trợ embed trực tiếp file PDF, thay vào đó bạn sử dụng thông qua Google Drive PDF viewer. Tham khảo đoạn code bên dưới.

<embed src="https://drive.google.com/viewerng/viewer?embedded=true&url=https://vinasupport.com/my_pdf_file.pdf" width="800" height="500">

Sử dụng <Object> HTML Tag

Đây là 1 phương pháp cũ, tuy nhiên vẫn có thể sử dụng với 1 số trình duyệt, các bạn tham khảo thêm nhé!

<object width="400" height="500" type="application/pdf" data="https://vinasupport.com/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

Sử dụng <Iframe> HTML Tag

Một phương pháp nữa là có thể sử dụng Iframe, nhưng không trực tiếp nhúng file pdf mà thông qua Google Doc

<iframe src="http://docs.google.com/gview?url=https://vinasupport.com.com/my_pdf.pdf&embedded=true" style="width:800px; height:500px;" frameborder="0"></iframe>

Việc chọn phương nào tốt nhất là dựa trên yêu cầu của dự án. Chúc các bạn tìm được phương pháp hiệu quả.

Nguồn: vinasupport.com