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:
Cons:
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:
Cons:
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;
The simplest way is to use,
<iframe src="pdf-link">
</iframe>
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.
In html page for pc is easy to implement
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
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
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
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
<?php
$your_file_name = "url_here";
//Content type and this case its a PDF
header("Content-type: application/pdf");
header("Content-Length: " . filesize($your_file_name ));
//Display the file
readfile($your_file_name );
?>
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>
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've had something similar before and used normally tags
<a href="path_of_your_pdf/your_pdf_file.pdf" tabindex="-1"><strong>click here</strong></a>
but it's interesting to find out some other ways as above!
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
<!DOCTYPE html>_x000D_
<html>_x000D_
<body>_x000D_
_x000D_
<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>_x000D_
</body>_x000D_
</html>You can use
<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>
Or, if you want to make it take up the whole page:
<a href="your_pdf_file_path">Link</a>
Portable Document Format (PDF).
Any Browser « Use _Embeddable Google Document Viewer to embed the PDF file in iframe.
<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>
Only for chrome browser « Chrome PDF viewer using plugin. pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.
<embed type="application/pdf"
src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf"
width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"
background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21"
title="CHROME">
Example Sippet:
<html>_x000D_
<head></head>_x000D_
<body style=" height: 100%;">_x000D_
<div style=" position: relative;">_x000D_
<div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">_x000D_
<p>An _x000D_
<a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception_x000D_
</p>_x000D_
<!-- To make div with scroll data [max-height: 500;]-->_x000D_
<div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">_x000D_
<img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />_x000D_
<p>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. _x000D_
<a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>_x000D_
</p>_x000D_
</div>_x000D_
<div style="float: left; width: 10%; background-color: red;"></div>_x000D_
<div style="float: left;width: 49%; ">_x000D_
<img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>_x000D_
<p>Streaming an Image form Base64 String « embedding images directly into your HTML._x000D_
<a href="https://en.wikipedia.org/wiki/Data_URI_scheme">_x000D_
<sup>Data URI scheme</sup>_x000D_
</a>_x000D_
<a href="https://codebeautify.org/image-to-base64-converter">_x000D_
<sup>, Convert Your Image to Base64</sup>_x000D_
</a>_x000D_
<pre>data:[<media type>][;base64],<data></pre>_x000D_
</p>_x000D_
</div>_x000D_
</div>_x000D_
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">_x000D_
<video style="height: 500px;width: 100%;" name="media" controls="controls">_x000D_
<!-- autoplay -->_x000D_
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">_x000D_
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">_x000D_
</video>_x000D_
<p>Video courtesy of _x000D_
<a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>._x000D_
</p>_x000D_
<div>_x000D_
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">_x000D_
<p>Portable Document Format _x000D_
<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>._x000D_
</p>_x000D_
<div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">_x000D_
<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">_x000D_
<p>Chrome PDF viewer _x000D_
<a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">_x000D_
<sup>extension</sup>_x000D_
</a>_x000D_
<a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">_x000D_
<sup> (surfingkeys)</sup>_x000D_
</a>_x000D_
</p>_x000D_
</div>_x000D_
<div style="float: left; width: 10%; background-color: red;"></div>_x000D_
<div style="float: left;width: 49%; ">_x000D_
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>_x000D_
<p>Embeddable _x000D_
<a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file: _x000D_
<pre>_x000D_
<iframe _x000D_
src="http://docs.google.com/gview?_x000D_
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" _x000D_
style="width:600px; height:500px;" frameborder="0"></iframe>_x000D_
</pre>_x000D_
</p>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</body>_x000D_
</html>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">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>
Source: Stackoverflow.com