Hướng dẫn nhúng (embed) và xem (Preview) file PDF trong HTML, HTML5.
viết lại bài sau theo ý hiểu: 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
PDF.js là một thư viện mã nguồn mở của Mozilla cho phép bạn nhúng và xem tệp PDF mà không cần plugin bên ngoài. Bạn cần tải và triển khai thư viện này trên máy chủ của mình, sau đó sử dụng mã nhúng để hiển thị tệp PDF.
- 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://vinascript.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://vinascript.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://vinascript.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
Phương pháp phổ biến nhất là sử dụng thẻ <iframe> để nhúng tệp PDF. Bạn chỉ cần đặt đường dẫn của tệp PDF vào thuộc tính src của thẻ <iframe>. Điều này làm cho tệp PDF hiển thị bên trong trang web của bạn.
<iframe src="ten-tap-tin.pdf" width="800" height="600"></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ả.
