Display PDF within web browser
HtmlPdfBrowserHtml Problem Overview
How can I display a pdf within a web browser on an .html page?
Html Solutions
Solution 1 - Html
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>
Solution 2 - Html
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.
Solution 3 - Html
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
Solution 4 - Html
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).
Solution 5 - Html
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">
.
Solution 6 - Html
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.
Solution 7 - Html
You can also embed using JavaScript through a third-party solution like PDFObject.
Solution 8 - Html
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>
Solution 9 - Html
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:
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.
Solution 10 - Html
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.
Solution 11 - Html
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.
Solution 12 - Html
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>
file_url
Displaying PDF by 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>
Solution 13 - Html
[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.
Solution 14 - Html
Displaying content saved in PDF/DOC/DOCX file format https://stackoverflow.com/questions/17784037/how-to-display-pdf-file-in-html">is ideal for displaying the pdf/doc/docx file on your web page
Solution 15 - Html
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.
Solution 16 - Html
Have you tried using a simple img tag?
<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">