Embed pdf on a website


If you are trying to embed pdf on your website,please try the following methods.I mention three methods in this article.
Method 1-Using html object tag


This is simple,you can easily embed pdf in your website by using html object tag

<object data=”Your pdf file path” type=”application/pdf”>

<iframe src=”https://docs.google.com/gview?url= Your pdf file path &embedded=true” frameborder=”1″></iframe>

</object>

Some mobile browser does not support html object tag.If you use only object tag it doesn’t work in mobile device.So,i use iframe tag between object tag.If the browser doesn’t support object tag the pdf file work with iframe tag.I use iframe tag with google document viewer(src=”https://docs.google.com/gview?url= Your pdf file path &embedded=true”),therefore your pdf file show in mobile browser with google document viewer.

Method 2-Using pdf.js
pdf.js is open source javascript library developed by mozilla.you can read documentation here.If you have a pro javascript skill you can customize pdf.js.How to embed pdf with pdf.js?It is very easy.Download zip file here and extract zip file.You can see two folder (build,web) and one file(LICENSE).Copy build folder and web folder to your website root folder.And then you can embed pdf by calling web/viwer.html?file=Your pdf file path

example website root folder file structure

You can view pdf by the following link

http://localhost:8000/web/viewer.html?file=../assets/pdf/test.pdf

Method 3-Using adobe pdf embed api
Adobe pdf embed api is a free javascript api to embed high-fidelity pdfs. Read documentation here.
There are three-step to use adobe pdf embed api.


1.Get a free credential
2.Get code
3.Embed code

Get free credential
To get an adobe free credential you need an adobe account. If you don’t have an account don’t worry you can register easily.Click here and sign in your adobe account.To create a new credential enter the credential name and your website domain name.

The website domain name is very important, for example, if you want to embed pdf to example.com by using adobe pdf embed API.website domain name must be example.com.And then create your credential and save CLIENT ID(API KEY) and click the get code button.

Get code
Adobe supports four embed pdf modes. You can choose to embed mode as you like but I recommend sized container mode because it can resize width and height. Go to adobe embed style and choose your embed mode and get embed code. The advantage of adobe embeds API is you can easily customize pdf embed UI.

Embed code
Copy embed code and paste in HTML code where you want to embed pdf.

In this ways, you can embed pdf on your website easily.

Thank for reading…..

Leave a Reply

Your email address will not be published.

DigitalOcean Referral Badge