Monday, December 25, 2017

How to display PDF in html web page

Usually, we need to display PDF file in HTML web page, today we will learn how do we embed the PDF file in a web page. There are many ways to do this. It's important to understand the best approach that suits your needs. Following are super easy methods for adding the PDF to your Website. 1. <embed />
<embed src="https://sumanbogati.github.io/tiny.pdf" width="600px" height="500px" />
Pros:- No JavaScript required, HTML standard, and Easy to use. Cons:- It does not have a fallback when your browser is not able to display PDF. DEMO 2. <object> </object>
<object data="https://sumanbogati.github.io/tiny.pdf" type="application/pdf" width="600" height="500">
  test.pdf
</object>
Pros:- No JavaScript required, HTML standard, and Easy to use. If a browser does not display the PDF then it let the user download the PDF by fallback. DEMO

3. <iframe> </iframe>
<iframe src="https://sumanbogati.github.io/tiny.pdf" style="width:600px; height:500px;"></iframe>
Pros:-
No JavaScript required, HTML standard, and Easy to use. You can reach the maximum users using a iframe.
DEMO

To cover the maximum browsers
, you can use the following code
<object data="https://sumanbogati.github.io/tiny.pdf" type="application/pdf" width="600" height="500">
    <embed src="https://sumanbogati.github.io/tiny.pdf" width="600px" height="500px" />
        

This browser does not support PDFs. Please download the PDF to view it: Download PDF.

</embed></object>
To reach the android browser

Any of the above method, does not display PDF in android browser, for that you need to upload the PDF to google drive and share that document with everyone, now you get the link and use this URL with embed tag, eg:-
<embed src="https://drive.google.com/file/d/1ZKgZhUuBr_-nLnbpExhQmqKCx_1QqxT2/preview" width="800px" height="1000px" />
We will reach to all the Desktop and android browsers
by following code,
<object data="https://drive.google.com/file/d/1ZKgZhUuBr_-nLnbpExhQmqKCx_1QqxT2/preview"  width="600" height="500">
    <embed src="https://drive.google.com/file/d/1ZKgZhUuBr_-nLnbpExhQmqKCx_1QqxT2/preview" width="600px" height="500px" />
        

This browser does not support PDFs. Please download the PDF to view it: View the PDF.

</embed></object>

Advance way to display PDF in html web page,

If you want to display PDF in browsers of all devices(Desktop and android mobiles) and want more control over displaying PDF in html web page, then the pdf.js will be useful. Following are the reasons which might attract you to use pdf.js,

  • Control over PDF toolbar in browser, there can be the interface, by which, end user can zoom and navigate the PDF pages.
  • Some annotation over the displayed PDF.
  • Supports on all desktop and mobile browsers.
  • It’s secure, users are not able to download the PDF.
  • You can validate on html web page that PDF is rendered or not.
  • pdf.js is JavaScript library which is maintained by Mozilla, it's so reliable and community supported, that, even Opera browser uses this framework on their own browser.

DEMO

Conclusion

If you need to display simply a PDF and does not want more control over the PDF in browser then the mix use of object and embed tag will be fine, otherwise, pdf.js can be the great tool.

23 comments:

  1. this above script shows only 1st page of the pdf, how to show the other pages...in the script...

    ReplyDelete
    Replies
    1. Hi Ashish,

      If you want to start with page number other than 1st, you can do this with pdf.js. Just set page number with parameter "pageNum" in example http://jsfiddle.net/sumanbogati/wagvs9Lf/4782/

      The parameter "pageNum" you can get at line number 12 in given example.

      Please share if there is any problem.

      Delete
  2. Hi Ashish,
    Sorry for the late reply, which example you are talking about in above scripts?

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Hi, Thanks for the good post. Is there a way to use a page number of the pdf document??

    ReplyDelete
    Replies
    1. Thanks,
      You want to get the current page number of PDF OR want to display PDF page with specific page number (eg:- set PDF page number 5 by default when browser is loaded) ?

      Delete
    2. Hi,

      If you want to set default page number. In pdf.js, just set page number with parameter "pageNum" in example http://jsfiddle.net/sumanbogati/wagvs9Lf/4782/

      The parameter "pageNum" you can get at line number 12 in given example.

      Hope this helps.

      Delete
  5. the pdf get downloaded and cannot view it ,when using chrome

    ReplyDelete
    Replies
    1. Hi Ananthu,

      Which option are you talking about ?

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. how we can view pdf file in web page just like a image view

    ReplyDelete
  8. Hi Kumar,

    I am assuming by image view means you don't need any toolbar while displaying the pdf.

    You have two options in that case, first is, you can display the pdf using embeded tag like,
    embed src="https://sumanbogati.github.io/sample.pdf#toolbar=0" width="600px" height="500px"

    Second, you have more control over the pdf viewer through pdf.js. You can get different pdf.js example here(https://mozilla.github.io/pdf.js/examples/).

    ReplyDelete
  9. Nice work, i like the design. Is it possible run in the localhost?

    ReplyDelete
    Replies
    1. Sorry for the late reply, Yes Doggo, it can be run into the localhost.

      Delete
  10. hi Suman thank u for your post it was so helpful but i'm trying to read pdf file in my local server how can i do it!!

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. hi how to display a pdf file from a list in iframe as a default whenever page is loaded

    ReplyDelete
  13. Can i view pdf offline using Android Google Chrome browser? What's the code for that?

    ReplyDelete