How to display pdf in HTML

Are you interested in PDF marketing or particularly PDF publishing? Do you want to display pdf in html page but you don’t know how to embed these files? Then you’re at the right place and this secret tipp will definitely help you to overcome this issue without searching for it yourself in Google - it's the free software Yumpu.

It is very simple for a professional web designer to display pdf in HTML. They can simply do it by interlinking the tag to the document which can be downloaded from the webpage. HTML tags make the job pretty simple. However, the documents layout will rely on the type of web browser being used. Not all have multimedia controls to show PDF files on a site. So, depending on the browser, you can directly embed the complete PDF file in the web page. If this format is not supported, however, you can add a link on the page from where a user can download the document.

Let us see how both of these methods work.

Displaying the Link

If you are well-versed with HTML, then displaying a link on a webpage shouldn’t be a difficult task for you. However, if you are not that experienced with how to embed pdf in HTML, you can make use of an internal link in the HTML body of your webpage.

The tag you should use is- <a href=”SampleFile.pdf”> Download PDF </a>

Here, in place of the SampleFile, you need to add the path of file whose link you want to show on the webpage. Remember that though the process looks very simple, you need to be aware of the type of browser that the users will use. This is because it will have a major impact on how your file will actually be available on the webpage. Thus, an ideal solution commonly used by web designers is to enable ‘Save As’ button which the user can use by right clicking on the document. This will be a better way to make sure that the user will be able to download the PDF files to their computer irrespective of the browser they are using.

Directly Display PDF in HTML

To directly show a pdf in HTML all you need to do is to add a simple code to the HTML of the webpage and the PDF file will be added to the page for all to read. To add the PDF, follow the below mentioned steps-

Open HTML code of webpage on which you want to embed the file
Go to the location where you want the embedded PDF file to be shown
Now, use this code- <embed src-“Path of PDF file.pdf” width=”600” height=”500”> </embed>
In the source (src) field, you need to add the path of the PDF file and the width and height can be adjusted as per the availability of space on the site
And you are done with the pdf embed work!

Other Methods

Apart from the <embed> code, you can also use other codes, like <object> and <iframe> to present your pdf in HTML.

The code for using the object tag is-

<p><b>Example</b>: Please download the file to view it as this browser does not support PDFs: <a href=”/pdf/sample-xyz.pdf”>Download PDF</a>.</p>

</object>

This can be used when the browser doesn’t allow you to present the document directly on the webpage. Just as the above mentioned method, object data will have the path of your file, height and width can be adjusted accordingly and the message that you want to unveil can also be written as per your preference.

For using <iframe>, use the code-

This browser does not support PDFs. Please download the PDF to view it: <a href=”/pdf/sample-xyz.pdf”>Download PDF</a>

</iframe>

Source (src) will have the source of the file, height and width can be adjusted and the text can also be altered as you want.

This was just a simple example of how to display pdf in HTML. Remember that you need to consider whether or not the browser has multimedia controls before using these methods.

Start and share your documents with the public now!