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 HTMLxem 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.

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

 

             
SHARE

Bài viết liên quan

mode_edit Bình luận của bạn

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

account_circle
web