Display PDF within web browser

Question

How can I display a pdf within a web browser on an .html page?

score 133 · Accepted Answer · edited Feb 22 '13 at 09:39

133

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="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

edited Feb 22 '13 at 09:39

rubyprince

17,559
11
64
104

answered Jan 31 '11 at 17:33

bradenkeith

2,397
1
17
26

3

With this solution some users do not see the PDF file, but are asked by google to log in first. – Philipp Zedler May 18 '13 at 21:22
47

I have a question about this solution. Will google store a copy of my pdf file in its servers? Will privacy of my content preserve? – hd. Aug 04 '13 at 05:27
@Alex to know for sure, try... I would try - ://docs.google.com/gview?url=://path.com/to/your/pdf.pdf&embedded=true as the iframe src – bradenkeith Apr 01 '14 at 21:36
how is this different/better from @Will's solution to directly set the iFrame's src to the pdf? I take it that direct linking will depend on software client side to actually display the pdf, but wouldn't google docs do as well? – Félix Adriyel Gagnon-Grenier May 08 '14 at 14:29
6

@hd. Yes, Google just displays the PDF through its embedded display. I don't think they keep a copy, although they'll have to translate it into page by page display, so at some point I expect they convert to PNG on a page-by-page basis. For anyone using this answer, please note that Google has a bandwidth limit for non-Google Document documents. Once exhausted, the PDF does not display, just a message that bandwidth has been exceeded and to try again later. – Jon Sep 02 '14 at 02:04
@bradenkeith This solution works fine, thanks. But what about in the case, if the user want to see the PDF without internet connection? – User Feb 27 '17 at 11:36

navins · Answer 2 · 2022-06-18T21:33:45.627

43

instead of using iframe and depending on the third party`think about using flexpaper, or pdf.js.

I used PDF.js, it works fine for me. Here is the demo.

edited Jun 18 '22 at 21:33

answered Apr 06 '13 at 15:31

navins

3,429
2
28
29

3

How is it not a third party? – Alex Apr 03 '14 at 19:10
51

It's third party code rather than a third party service. – Collin Anderson Sep 15 '14 at 12:10
1

Better solution for application for VPN environment. – Erlan Dec 18 '17 at 08:47
1

These links are broken now. – Markus Mar 10 '22 at 13:44

score 30 · Answer 3 · answered Dec 01 '14 at 19:45

30

preffered using the object tag

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

note that you can change the width and height to any value you please visit http://www.w3schools.com/tags/tag_object.asp

answered Dec 01 '14 at 19:45

BAKARI SHEGHEMBE

449
6
20

The like you posted doesn't provide any more insight to the answer. – Daniël W. Crompton Dec 01 '14 at 20:07
4

the question was How can I display a pdf within a web browser on an .html page? using the html 5 object tag will help ... Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages. – BAKARI SHEGHEMBE Dec 03 '14 at 19:51
You are completely right, however the link to w3schools doesn't give any more information to complement the answer as you wrote it. – Daniël W. Crompton Dec 04 '14 at 00:07
This would not work if you don't have any pdf viewer in your browser – Umair Hamid Dec 08 '14 at 11:20
1

Yes that is true. A good thing about the object tag is that it can detect that. And it allows you to put further options for the visitors to view the page through either gdrive, onedrive and etc. – BAKARI SHEGHEMBE Dec 11 '14 at 20:05

score 20 · Answer 4 · 2016-07-11T13:27:21.780

20

The simplest way is to create an iframe and set the source to the URL of the PDF.

(ducks mad HTML designers) Done it myself, works fine, cross browser (crawls into bunker).

edited Jul 11 '16 at 13:27

answered Jan 31 '11 at 17:30

9

doesn't work if you don't have the pdf plugin installed on IE – Collin Anderson Sep 12 '14 at 20:51
3

How is that obvious? Seems like a useful addendum to "cross-browser". – showdev Sep 29 '15 at 00:19
1

this was so much easier to set up than all the other 3rd party ones. I don't know how it performed in 2011 but in 2016 it is very fast and full of useful features. Also seems to work great across Chrome, FF and IE – slaw Jul 10 '16 at 13:58
1

It doesn't work for me in Chrome on Android phone: it downloads pdf and opens it in separate app (if you have one). And I can't scroll to other pages in Safari on iOS. I just see the first page of pdf. – Vasiliy Zverev Sep 23 '16 at 15:45

score 10 · Answer 5 · answered Jan 31 '11 at 17:24

10

The browser's plugin controls those settings, so you can't force it. However, you can do a simple <a href="whatver.pdf"> instead of <a href="whatever.pdf" target="_blank">.

answered Jan 31 '11 at 17:24

jschorr

3,034
1
17
20

1

Finally someone who know what they are talking about for this answer. This is the best answer and the simplest. @jschorr is absolutely correct. The browser controls these setting. Most efficient!! – Val Apr 20 '17 at 05:13

ftcosta · Answer 6 · 2014-12-10T03:23:56.570

6

As long as you host the PDF the target attribute is the way to go. In other words, for relative files, using the target attribute with _blank value will work just fine.

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

For absolute paths engines will go to the Unified Resource Locator and open it their. So, suppress the target attribute.

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

Browsers will make a rely good job in both cases.

edited Dec 10 '14 at 03:23

answered Dec 10 '14 at 03:14

ftcosta

61
1
2

This solution worked way better for me than the accepted answer. It should also be noted I work with some sensitive information, so not having my documents publicly available was important to me. – Casper Wilkes Feb 29 '16 at 15:48

score 6 · Answer 7 · answered Sep 23 '22 at 16:10

I did a careful evaluation of providers on this space:

free solutions

iframe: Just use an iframe, however, this is not what most people search here.
Pdf.js is the open source solution without external dependencies
Adobe offers a 'free' PDF Embed API

Commercial Providers

Pdf.js Express is commercialized extension to Pdf.js
PSPDFKit - Provder from Austria with rather good business support
Foxit - Chinese company providing a PDF web solton as well.enter link description here
PDFTron - US-based competitor to PSDPDFkit - more costly but also mot advanced.

Hope this helps. I might publish more detailed information in a blogpost, if this is helping people (let me know in comments).

score 2 · Answer 8 · answered Oct 13 '14 at 02:47

You can use this code:

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

Or use Google Docs embeddable PDF viewer:

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

score 2 · Answer 9 · answered Jan 31 '11 at 17:27

2

You can also embed using JavaScript through a third-party solution like PDFObject.

answered Jan 31 '11 at 17:27

Nils Magne Lunde

1,794
1
13
21

Spectric · Answer 10 · 2022-05-11T00:33:17.260

2

If you don't want to use some third party, you can use the <embed> tag with the source of the file in the src attribute. This uses the native browser PDF viewer, and offers more browser support than the object tag.

<embed src="your_pdf_src" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">

Live example:

<embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">

^{Loading the PDF inside a snippet won't work, since the frame into which the plugin is loading is sandboxed.}

Tested in Chrome and Firefox. See it in action.

edited May 11 '22 at 00:33

answered Jan 12 '21 at 19:34

Spectric

30,714
6
20
43

`object` tag is standard in ES2015 and replaced `embed` tag – manikanta May 10 '22 at 23:57
1

@manikanta `embed` is part of the HTML5 specification. See: https://html.spec.whatwg.org/#embedded-content-2 – Spectric May 11 '22 at 00:35

score 2 · Answer 11 · answered Jan 17 '22 at 11:46

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

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). You would have to add { promise: <FILE_PROMISE> } config.

<div id="adobe-dc-view"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content: { promise: <FILE_PROMISE> }
      metaData: { fileName: "file_name_to_display" }
    }, {});
  });
</script>

Displaying PDF by `file_url`

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 by file_url. You would have to add { location: { url: "url_of_the_pdf" } } config.

<div id="adobe-dc-view"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content: { location: { url: "url_of_the_pdf" } },
      metaData: { fileName: "file_name_to_display" }
    }, {});
  });
</script>

score 0 · Answer 12 · answered Dec 02 '16 at 12:46

0

You can also have this simple GoogleDoc approach.

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

This would create a new page for you to view the doc without distorting your flow.

answered Dec 02 '16 at 12:46

Asuquo12

827
17
26

This works fine, thanks. But what about in the case of, if the user want to see the pdf without internet connection? – User Feb 27 '17 at 11:47
you can use JQuery library such as pdf.js https://github.com/mozilla/pdf.js .. 2. Check out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8. – Asuquo12 Mar 02 '17 at 09:32

score 0 · Answer 13 · answered Jan 31 '11 at 17:24

The simple solution is to put it in an iframe and hope that the user has a plug-in that supports it.

(I don't, the Acrobat plugin has been such a resource hog and source of instability that I make a point to remove it from any browser that it touches).

The complicated, but relative popular solution is to display it in a flash applet.

K J · Answer 14 · 2022-06-19T01:34:57.187

By far the simplest method to avoid cross site and or server load Issues is include the cover icons in the page and provide a DownLink. It is minimal demand rendering a page of several covers / icons. The second best method is show a single iFrame with your adjoining commentary.

However many modern browser users a weary of exploits may have turned PDF display OFF and blocked any attempts to pop-up or window.open inline runnable embedment objects like SWF or PDF.

Note the snippet is a small icon but you can use larger front cover like Amazon Books (within the browser datauri limits)

<center>  

<h4>Click on the below icon to download pdf file :<br>If blocked by Security Refresh to show Cover and Right Click to Download</h5>  

<a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAABBVBMVEUAAABTwd7O7PUAAAC35PEAAAAAAABTwd5Twd5Swd5Twd5Swd5RwN7A6POw4fBUwd5Xwt9bxOCS1+pTwd5Vwt9Wwt9dxeCC0ecAAABXw99bxOBcxOAAAABUwd4AAABWwt8AAABkx+Juy+MAAABUwd5Uwd5Vwt9Wwt9Yw99gxuFryeJoyeN/0OeZ2utXwt9Wwt9Wwt9bxOBWwt9Yw99gxuEAAABNv91Uwd5Uwd5Vwd5Yw98AAABaw+BbxOBYxOAAAAByzeVVwt9Vwt9Zw+BfxeBKvt1oyeIAAAAAAABVwt9Yw98AAABTwd5bxOBaxOBpyOKC0eYAAACN1emD0OZUwd5RwN4AAADkCLpdAAAAVHRSTlMA/QK/BICP+fby7fv4CgbjjlAK58KhPg7PgF5JQMevnmAiFxDf0rWxfDkwKBIIrqmUiIZ3WlDz6NvLpZ9oQzQwHNe/dGI6LO/fuphwz2xWNiEgFybn7OvoAAADuUlEQVRIx91U15baMBCVbNwNtjHdgOm9l9A7IQu72bQh//8pkcCGTXE2D8lLxufYM5LuaO7oWujfGPP76WB3MrEt3315tVMstOrI2wIlkCQQJlUnzoYxSCYeHbwhPTAY5J9rUFrTBHFF3eUYdJCKnohmQb58GzouHFCjhbe1SxzGUS9IHU+dAq2xtgsJleY1NCDiBXkLcdfNjkHcu72qnefekL7rNp7AvKX+eO6/vkvzKFQK8tKJvpx3XpDl+eR4XdxjDCXkHFAVEl6Qz+r26jxDizAfiPaVzQCWXhBfYURe/pqlgd05nXoj3F9+9tHj8mwyM4V2aCwBwPkNNfUMoGqhckHy/RrQmG8FULRj7widz35qDUsdxadjFaAYX/8MOPRMeOrKhENuPGm421bUBPINyN6CHF4w35eUUHErwqCwGWVsqXbXqWauUVfKEYGKwuklo6aubA2axIJERLDp6ffKeoQwmAuVqFmmSQ9lZZK7QyoQvhL0ScWUVEfowwgAcIUMlM24EnEqEVNBF7GWS25LpgAdBjEhoKb5CViBTcCZTOCb1t7Drfq6YhLuWQUutiAjNujINTHleoO7uKuKtCbbqhcErpJyymDfjlo9um7OTLnESgBhUlj7AtkQ1SwUKDgMmDgeINcSkIpemypsS0KEJKFkZIv0clIY4Ksogx2wfXdx6dKTQXMZ8FwVafeC/baepTTxrlmkig5EtvjobOdw0KC4jzKlQgDFBeM2HBU3QbTDH4LGE8iJH260nC6CdhLDZNm4eDvmOCbwBYRMUKdZ9JP5jbYIWN20QlC2IrXah6q1E+TWRsQApUTQQ/1T3AlJGAOV//l86TOWQ3oKPMRPRTgir+xykYLufr8faOJ8mQ3So/a8LtdqyWkGpnTmWL8SjoDhBamdO+5/gnXfgqrw9Uup4rpdbGujrNuYN/E/uPoCKZAj6E8g3VuNJhb0wOu3ZV1pO55hykbZ/e+QBZZnkzey75I1LI6XqNFVis+XZpRxA3nZe+j5/XVdxu0cXTqQcHvhD1hCyhNB9S3JitB6ZpxKifBkTZ3UkbcxCXvarzMv1LoPlypR9FeMjT1wL8JPNGBZlGSdiP0FJJlJr2azfJJLr4ZsOvYuQ9Mkk7NP3CxDIjbJoXSe5zN3CFmVf+BZjuTl3q3yHH9JE+M4tOJZEpHZFZuJcV/vkNinB/QuT76Z9NCFxNDjA8fzHHnyLJqlh4/8d4UhLjmccXn+kaeFDdkkHUPpTIZ/zAxZsjiZRvkZN0T/l30D1xyHzxgRNCEAAAAASUVORK5CYII=" alt="react">
<br><b> Download Dummy.pdf</b></a>

Carles Barrobés · Answer 15 · 2022-05-12T11:55:49.133

-1

[this is a very old answer, from when other options mentioned now didn't exist]

Back in 2011, we used to render the PDF file pages as PNG files on the server using JPedal (a java library). That, combined with some javascript, gave us high control over visualization and navigation.

edited May 12 '22 at 11:55

answered Jan 31 '11 at 17:31

Carles Barrobés

11,608
5
46
60

I think this is great , but needs a lot of resources. – eveevans Jul 08 '14 at 18:11
But users can't copy/paste text from PNG. – Vasiliy Zverev Sep 23 '16 at 15:57

score -1 · Answer 16 · answered Apr 27 '20 at 14:35

I recently needed to provide a more mobile-friendly, responsive version of a .pdf document, because narrow phone screens required scrolling right and left a lot. To allow just vertical scrolling and avoid horizontal scrolling, the following steps worked for me:

Open the .pdf in Chrome browser
Click Open with Google Docs
Click File > Download > Web Page
Click on the downloaded document to unzip it
Click on the unzipped HTML document to open it in Chrome browser
Press fn F12 to open Chrome Dev Tools
Paste copy(document.documentElement.outerHTML.replace(/padding:72pt 72pt 72pt 72pt;/, '').replace(/margin-right:.*?pt/g, '')) into the Console, and press Enter to copy the tweaked document to the clipboard
Open a text editor (e.g., Notepad), or in my case VSCode, paste, and save with a .html extension.

The result looked good and was usable in both desktop and mobile environments.

score -2 · Answer 17 · edited May 23 '17 at 12:26

-2

Displaying content saved in PDF/DOC/DOCX file format is ideal for displaying the pdf/doc/docx file on your web page

edited May 23 '17 at 12:26

Community

1
1

answered Oct 05 '16 at 14:03

Abhishek SIngh

1

score -6 · Answer 18 · answered May 10 '17 at 14:05

-6

Have you tried using a simple img tag?

<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">

answered May 10 '17 at 14:05

Mat Barnett

17
2

Does anybody know how this is supported? – bert bruynooghe May 19 '17 at 10:41
2

This is impossible. – Henrique Van Klaveren May 22 '20 at 21:00

Display PDF within web browser

18 Answers18

Update - Adobe PDF Embed API

Displaying PDF as buffer

Displaying PDF by `file_url`

Linked

Display PDF within web browser

18 Answers18

Update - Adobe PDF Embed API

Displaying PDF as buffer

Displaying PDF by file_url

Linked

Displaying PDF by `file_url`