View pdf file in html page

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?

Luke Girvin

13k8 gold badges61 silver badges82 bronze badges

asked Jul 22, 2013 at 9:29

2

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

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

answered Mar 21, 2014 at 21:31

GofilordGofilord

5,8793 gold badges25 silver badges43 bronze badges

10

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.

JerabekJakub

5,0614 gold badges24 silver badges32 bronze badges

answered Jul 3, 2016 at 17:55

Rahul SinhaRahul Sinha

1,84113 silver badges17 bronze badges

7

1. Browser-native HTML inline embedding:

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:

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;

answered Mar 5, 2020 at 7:03

UkrUkr

2,05116 silver badges16 bronze badges

0

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

answered Jul 24, 2013 at 16:19

you can display easly in a html page like this

answered Sep 14, 2017 at 9:06

harun ugurharun ugur

1,55115 silver badges17 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

download

marc_s

713k171 gold badges1314 silver badges1433 bronze badges

answered Jun 29, 2017 at 5:01

pradip korpradip kor

4594 silver badges8 bronze badges

1

Portable Document Format (PDF).

• Any Browser « Use _Embeddable Google Document Viewer to embed the PDF file in iframe.

• Only for chrome browser « Chrome PDF viewer using plugin. pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.

Example Sippet:

   
   
      

      

         
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
            
         
         

         

            
            
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?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

               

            
         
      
   

answered Feb 5, 2018 at 10:34

YashYash

8,7082 gold badges66 silver badges71 bronze badges

The element is supported by all browsers and defines an embedded object within an HTML document.

Bottom line: OBJECT is Good, EMBED is Old. Beside's IE's PARAM tags, any content between OBJECT tags will get rendered if the browser doesn't support OBJECT's referred plugin, and apparently, the content gets http requested regardless if it gets rendered or not. Reference

Working code: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6

answered Sep 2, 2019 at 7:22

The simplest way is to use,

and if its still getting downloaded instead of viewing, check the server response header, it should have, Content-Disposition:Inline and not, Content-Disposition:Attachment.

answered Oct 4, 2018 at 10:54

Rohith MuraliRohith Murali

5,3232 gold badges23 silver badges25 bronze badges

0

I've had something similar before and used normally tags

click here

but it's interesting to find out some other ways as above!

answered Jul 26, 2018 at 15:34

DirWolfDirWolf

8346 silver badges22 bronze badges

Also this method is useful:

Displaying pdf file on desktop and mobile browsers:

answered Aug 27, 2021 at 7:55

MoriMori

1,35010 silver badges16 bronze badges

Update - Adobe PDF Embed API

Adobe released their Adobe PDF Embed API which is completely free. Since they created the PDF format itself, their API is probably the best for this.

• It delivers the highest quality PDF rendering available.
• You can fully customize user experience and choose how to display a PDF.
• You will also have analytics on PDF usage so you can understand how users interact with PDFs, including time spent on a page and searches.

All you have to do is create an api_key and use it in the code snippet.

Displaying PDF as buffer (local file for example)

Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF if you have the buffer (local file for example).

answered Jan 17 at 11:44

NeNaDNeNaD

12.2k7 gold badges26 silver badges73 bronze badges

You can use

Or, if you want to make it take up the whole page:

Link

Ivan86

5,6472 gold badges13 silver badges30 bronze badges

answered Apr 3, 2020 at 4:26

I understand you want to display using HTMl but you can also open the PDF file using php by pointing out the path and the browser will render it in a few simple steps

answered Jan 26, 2021 at 9:53

The answer provided by gofilord is right but I might also add that if you create an empty bucket to pour your pdf into you should give it a src="" like...

...in the HTML and in the javascript...

document.getElementById('fooEmbed').src = 'bar.pdf';

...it will work. If instead you do this...

...it will not work.

answered Jun 17 at 18:11

How do I make a PDF viewer in HTML?