How to display PDF file in HTML?

I have an auto generated PDF file by itext and I need to display that PDF file in HTML. My question is: How to display a local PDF file in HTML using pdf.js? Should that PDF file be generated by some standards?

13.4k 10 10 gold badges 66 66 silver badges 85 85 bronze badges asked Jul 22, 2013 at 9:29 4,829 3 3 gold badges 26 26 silver badges 37 37 bronze badges Possible duplicate of Display PDF within web browser Commented Mar 21, 2018 at 5:10 Also look at this Recommended way to embed PDF in HTML? Commented Apr 4, 2022 at 12:38

17 Answers 17

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

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

43.7k 21 21 gold badges 143 143 silver badges 740 740 bronze badges answered Mar 21, 2014 at 21:31 6,499 4 4 gold badges 28 28 silver badges 44 44 bronze badges Commented Aug 18, 2016 at 12:13 it's downloading the file instead of showing that file Commented Dec 12, 2017 at 9:48 It shows that plugin not supported in mobile device on chrome browser. Commented Dec 22, 2018 at 10:16 @SumanBogati The link is dead, new link: jsgyan.blogspot.com/2017/12/… Commented Jun 12, 2020 at 9:46 In 2021 CanIUse shows great support over desktop as well as mobile. Commented Mar 10, 2021 at 13:24

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.
5,330 4 4 gold badges 27 27 silver badges 36 36 bronze badges answered Jul 3, 2016 at 17:55 Rahul Sinha Rahul Sinha 2,009 16 16 silver badges 17 17 bronze badges Here is the link: Embeddable Google Docs Commented Feb 19, 2017 at 17:48

You need to use iframe together with google docs viewer otherwise you might get an "Error detected by the Application Firewall" message, depending on your hosting.

Commented Sep 6, 2017 at 0:05 Note that this method only supports PDFs up to 25mb Commented Oct 10, 2017 at 17:36

Just a further comment, if you want to embed a pdf file in the google drive. After clicking into the pdf, find "Embed item" it will generate the iframe HTML.

Commented Aug 16, 2018 at 14:48 Does anyone here have a reference to what kind of browser support this has? Commented Aug 5, 2020 at 0:07

1. Browser-native HTML inline embedding:

2. Google Docs Viewer:

3. Other solutions to embed PDF:

IMPORTANT NOTE:

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

X-Frame-Options SAMEORIGIN;
answered Mar 5, 2020 at 7:03 2,626 20 20 silver badges 17 17 bronze badges

Thanks for summary! I started with pdfobject just to find out it's not a rendering solution, continued with pdf.js to find out that it doesn't render my pdfs well on mobile and ended up with google viewer that worker flawlessly.

Commented Feb 26, 2023 at 23:07 Is there other alternative to google doc viewer? Commented Mar 23, 2023 at 5:24

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

1 1 1 silver badge answered Jul 24, 2013 at 16:19 user2365865 user2365865

you can display easly in a html page like this

answered Sep 14, 2017 at 9:06 harun ugur harun ugur 1,812 20 20 silver badges 20 20 bronze badges

In html page for pc is easy to implement

but pdf show in mobile by this code is not possible you must need a plugin

if you have not responsive your site. Then above code pdf not show in mobile but you can put download option after the code

750k 181 181 gold badges 1.4k 1.4k silver badges 1.5k 1.5k bronze badges answered Jun 29, 2017 at 5:01 pradip kor pradip kor 459 4 4 silver badges 9 9 bronze badges On chrome it ok but on IE is not work. How can do on IE Commented Nov 29, 2019 at 6:12 

  
   
 
An image is an artifact that depicts visual perception
  
 
Streaming an Image form Response Stream (binary data) « This buffers the output in smaller chunks of data rather than sending the entire image as a single block. StreamToBrowser 
 
 
 Red dot
Streaming an Image form Base64 String « embedding images directly into your HTML. Data URI scheme  , Convert Your Image to Base64  
data:[<media type>][;base64],<data>
 
 
 
 
  
Video courtesy of Big Buck Bunny.
 
 
Portable Document Format (PDF).
 
 
Chrome PDF viewer extension   (surfingkeys)  
 
 
 
Embeddable Google Document Viewer. Here's the code I used to embed the PDF file: 
<iframe src="http://docs.google.com/gview?%20url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>