Các Cách Nhúng Và Xem File PDF Trong HTML/HTML5 - VinaSupport

• Linux
• AWS
• Hosting
• Lập trình
• Thủ thuật
• search

• Linux
• AWS
• Hosting
• Lập trình
• Thủ thuật

search clear search menu Trang chủ » Lập trình » HTML/CSS » Các cách nhúng và xem file PDF trong HTML/HTML5 Các cách nhúng và xem file PDF trong HTML/HTML5

admin 17/11/2018 HTML/CSS 20,849 lượt xem 2 Bình luận

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

              TAGS: HTML5 HTML5 Tag Thẻ HTML5 HTML Embed Tag Nhúng PDF trong HTML Embed file PDF Preview file PDF SHARE Facebook Twitter Email

Bài viết liên quan

Hướng dẫn sử dụng HTML5 để dàn trang web

Có 2 bình luận trong bài viết “Các cách nhúng và xem file PDF trong HTML/HTML5”

1. Ely spa 07/05/2021 09:11

   Hay quá cám ơn admin

   Trả lời
2. kimchibao 16/08/2021 09:49

   Kiến thức tuyệt vời, Xin cảm ơn tác giả

   Trả lời

mode_edit Bình luận của bạn Hủy bình luậ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 *

Nội dung bình luận account_circle Name * email Email * web Website

Save my name, email, and website in this browser for the next time I comment.

Gửi send

Current ye@r * Leave this field empty

Chuyên mục

• Amazon Web Services Hosting - Domain Linux PostgreSQL Wordpress

Bài viết mới nhất

• Khuyến mại giảm 45% phần mềm Parallels Desktop tháng 02/2026
• Hawk Host Coupon tháng 02/2026 – Giảm tới 40% Web Hosting
• Lovo AI là gì? Mã giảm giá Lovo AI mới nhất năm 2025
• VoiceType AI – Chuyển giọng nói thành văn bản (Voice-to-Text) – Giảm 83% trọn đời cho gói trả phí
• Tối ưu hóa video Youtube của bạn với trợ lý AI vidIQ
• ElevenLabs – Nền tảng lồng tiếng AI chuyên nghiệp – Tiết kiệm đến 50% trong tháng 02/2026
• AKOOL AI – Công cụ tạo hình ảnh & video mạnh mẽ bằng trí tuệ nhân tạo – Giảm giá tới 30% trong tháng 02/2026
• Merlin AI: Tổng Hợp mã giảm giá và khuyến mãi – Tiết Kiệm 82% trong tháng 02/2026
• Domo AI – Công cụ AI sáng tạo video và hình ảnh động ấn tượng – Ưu đãi độc quyền: Giảm tới 37%
• Monica AI – Trợ lý AI toàn diện – Tích hợp OpenAI, DeepSeek, GPT, Claude và Gemini – Flash Sale giảm 33% cho gói Unlimited

Tutorial mới nhất

• Export dữ liệu ra file CSV trên PostgreSQL
• Import file CSV vào PostgreSQL Database
• Hiển thị kích thước các bảng trên PostgreSQL Database
• Cài đặt và sử dụng Font Awesome trên Laravel
• Laravel Seeding là gì? Đồng bộ dữ liệu dùng Database: Seeding

Có thể bạn quan tâm

• [Odoo] Config log và đường dẫn file log
• Fix lỗi: “Invalid command ‘SSLMutex’, perhaps misspelled or defined by a module not included in the server configuration” của Apache
• Top 4+ Free SSL Certificate miễn phí
• [Python] Kết nối tới dịch vụ AWS sử dụng thư viện Boto3
• Kiểm tra dịch vụ start tự động khi máy chủ Linux khởi động