How to Embed PDF in HTML

refer by :-https://www.w3docs.com


There are several ways for including a PDF file in your HTML document:
  • Using the <embed> and <object> tags, which are considered to be old-fashioned ways, because they are deprecated now
  • Using the <a> or the <iframe> tag
The easiest way to put a PDF document in an HTML document is using the <a> tag with its href attribute. What you need to add to the element is the URL or the reference link of your PDF file. Your code will look like this:
Example
<!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>

How to embed PDF viewer in HTML

Another way of adding a PDF file to your HTML document is using the <iframe> tag. It allows to set also your preferred width and height. To have the code, follow these simple steps:
  1. Set the source to specify the web address of your PDF file:
<iframe src="URL"></iframe>
  1. Set the height and width attributes to define the size of the iframe:
<iframe src="URL" height="200" width="300"></iframe>
The complete code will be like this:
Example
<!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>
If you don’t want users to download your PDF file just add #toolbar=0 after the URL of your PDF document.
Example
<!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>

Comments

Post a Comment