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.

6 Comments

  1. It’s a brilliant variant to embed the pdf in the html. There are some great online software services they are specified for embed pdf in html

  2. Thanks
    exactly what I wanted!!!

  3. Beware of companies and people who claim to be Net designers and builders however perform mostly graphic design and work in print media.

  4. Bagus sekali tutorialnya. Namun bagaimana cara menampilkan pdf seperti Scrib.com atau menggunakan viewer flash player..

  5. i had fetched the pdf from the server using angularjs and need to show that fetch pdf in the page.how can i embed that object

  6. Thanks a lot for the tutorial. Just the thing I wanted.
    It would be great help if you would help me in viewing the pdf pages horizontally not vertically.

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *