Hướng dẫn embed pdf in html - nhúng pdf vào html

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ẻ  và  , đượ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  hoặc  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>
    <h2>PDF Example</h2>
    <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: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: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>
    <h2>PDF Example with iframe</h2>
    <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:# 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>
    <h2>How to disable downloading of the PDF document</h2>
    <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.

There are several ways to include a PDF file in your HTML document:

  • Sử dụng các thẻ và các thẻ, được coi là những cách lỗi thời, bởi vì chúng không được sử dụng.
  • Sử dụng hoặc thẻ.

Cách dễ nhất để đặt PDF vào tài liệu HTML là sử dụng thẻ với thuộc tính HREF của nó. Bạn cần thêm URL hoặc liên kết tham chiếu của tệp PDF của bạn vào phần tử. Mã của bạn sẽ trông giống như sau.href attribute. You need to add the URL or the reference link of your PDF file to the element. Your code will look like the following.

Ví dụ về việc nhúng tệp PDF vào tài liệu HTML:

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

Kết quả

Ví dụ PDF

Mở ví dụ tệp PDF.

Một cách khác để thêm tệp PDF vào tài liệu HTML của bạn là sử dụng thẻ. Nó cho phép thiết lập chiều rộng và chiều cao ưa thích của bạn. Để có mã, hãy làm theo các bước đơn giản sau:

  1. Để chỉ định địa chỉ web của tệp PDF của bạn, hãy đặt nguồn. Cả hai thuộc tính được đề cập có thể được chỉ định bởi "PX", "cm", "VH" hoặc tỷ lệ phần trăm.source. Both of the mentioned properties can be specified by "px", "cm", "vh", or percentages.

<iframe src="URL"></iframe>

  1. Để xác định kích thước của iframe, hãy đặt các thuộc tính chiều cao và chiều rộng:height and width attributes:

<iframe src="URL" height="200" width="300"></iframe>

Mã hoàn chỉnh sẽ như thế này.

Ví dụ về việc thêm tệp PDF vào HTML bằng cách sử dụng thẻ:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>PDF Example with iframe</h2>
    <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, hãy thêm #Toolbar = 0 sau URL của tài liệu PDF của bạn.#toolbar=0 after the URL of your PDF document.

Ví dụ về việc đặt một tệp PDF không thể tải trong HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>How to disable downloading of the PDF document</h2>
    <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf#toolbar=0" width="100%" height="500px">
    </iframe>
  </body>
</html>