How to display PDF file in HTML?

Implementation of a PDF file in your HTML web-page is very easy.

<embed src="file_name.pdf" width="800px" height="2100px" />

Make sure to change the width and height for your needs. Good luck!


I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.

<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

1. Browser-native HTML inline embedding:

<embed
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
    type="application/pdf"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></embed>
<iframe
    src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></iframe>

Pro:

  • No PDF file size limitations (even hundreds of MB)
  • It’s the fastest solution

Cons:

  • It doesn’t work on mobile browsers

2. Google Docs Viewer:

<iframe
    src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
    frameBorder="0"
    scrolling="auto"
    height="100%"
    width="100%"
></iframe>

Pro:

  • Works on desktop and mobile browser

Cons:

  • 25MB file limit
  • Requires additional time to download viewer

3. Other solutions to embed PDF:

  • https://mozilla.github.io/pdf.js
  • https://pdfobject.com
  • https://viewerjs.org

IMPORTANT NOTE:

Please check the X-Frame-Options HTTP response header. It should be SAMEORIGIN.

X-Frame-Options SAMEORIGIN;

If you want to use pdf.js, I suggest you to read THIS

You can also upload your pdf somewhere (like Google Drive) and use its URL in a iframe

or

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>

you can display easly in a html page like this

<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf"   height="700px" width="500">