Cách Nhúng PDF Trong HTML - Techmaster

Trang chủ » Thẻ Pdf » Cách Nhúng PDF Trong HTML - Techmaster

Có thể bạn quan tâm

Trang chủ Blog Cách nhúng PDF trong HTMLCách nhúng PDF trong HTML03 tháng 09, 2019 - 12177 lượt xem

Có một số cách để bao gồm tệp PDF trong tài liệu HTML của bạn:

  • Sử dụng thẻ <embed> và <object> , được coi là cách thức cũ, vì hiện tại chúng không được dùng nữa
  • Sử dụng <a> hoặc <iframe> tag

Cách dễ nhất để đặt tài liệu PDF vào tài liệu HTML là sử dụng thẻ với thuộc tính href . Những gì bạn cần thêm vào thành phần là URL hoặc liên kết tham chiếu của tệp PDF của bạn. Mã của bạn sẽ trông như thế này:

VD: <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>PDF Example</h1> <p>Open a PDF file <a href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">example</a>.</p> </body> </html>

  1. Đặt nguồn để chỉ định địa chỉ web của tệp PDF của bạn:
<iframe src="URL"></iframe>
  1. Đặt thuộc tính chiều cao và chiều rộng để xác định kích thước của iframe:
<iframe src="URL" height="200" width="300"></iframe>

Mã hoàn chỉnh sẽ như thế này: <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>PDF Example with iframe</h1> <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf" width="100%" height="500px"> </iframe> </body> </html>

Nếu bạn không muốn người dùng tải xuống tệp PDF của mình, chỉ cần thêm # thanh công cụ = 0 sau URL của tài liệu PDF của bạn: <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1>How to disable downloading of the PDF document</h1> <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf#toolbar=0" width="100%" height="500px"> </iframe> </body> </html>

Nguồn:Cách nhúng trình xem PDF trong HTML

Dịch bởi:Vũ Đức Nguyên.

Bình luận

* Vui lòng đăng nhập trước khi bình luận.Ảnh đại diện 0 Thích Chia sẻ Nguyên Vũ Nguyên Vũ 17 bài viết

Đầu mục bài viết

Bài viết liên quan

Hướng dẫn ajax laravel 6Tìm hiểu về DOM - Document Object Model (p7-Hiểu events trong JavaScript)Tìm hiểu về DOM - Document Object Model (p5-Cách thay đổi DOM)Tìm hiểu về DOM - Document Object Model(p4-Làm thế nào để Traverse DOM)Destructuring Assignments trong JavaScript0

Từ khóa » Thẻ Pdf