How to Display/Embed .PDF File in Web Pages

Nowadays, website contents in the internet is not only text and image. Some other types of content have often Embedded in web pages. One of them is .PDF formatted. Website content with pdf formatted commonly used for showcase ebook or other long document.To embed or display file with .pdf formatted, there are 2 simple ways you can used.

Way #1

It is the way to embed .PDF formatted file as full page. It means, there are no other element in that page. It is like you read pdf file with browser, not pdf reader. The way is just link your pdf file with <a> tag.

<a href="http://localhost/bogor-learning/files/cerita.pdf" target="_blank">Cerita</a>

*the red code is path to your pdf file.

The html code above will link to your pdf file. And if you click that, you will open your pdf file in browser like this :

Way #2

It is the way to embed of display your .pdf formatted file as part of a web page. It mean, the content of your pdf file will displayed in same page with other element of your website. like this :

This is allow you to display a pdf file in the body of your blog posts. To do this, you can use <embed> tag in html editor. More details is below :

<embed src="path to your pdf file" type="application/pdf" width="500" height="700"/>

Just place the code above in your post body. you can also set it width and height. Happy trying. If you have any question, just ask in the comment below.