<div id="container">
<object id="objectPDF" type="application/pdf" data="Common Documents/General Syllabus1.pdf" width="100%" height="1000px"></object>
<param name="view" value="fitH" valuetype="data"/>
</div>
Here is a link that helps you achieve your goal of displaying a PDF within html. I tested this approach in the latest Safari(with/without Adobe PDF plug-ins), Firefox, and Chrome browsers. Though the code works in all of these browsers, the results can be more or less limiting to the end-user's view.
First the code. You will need a fully qualified link to the PDF, or a relative path if on a server.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Embedding a PDF using static HTML markup: Sized element</title>
<style type="text/css">
.pdf {
height: 75%;
width: 75%;
margin: 2em auto;
border: 5px solid #999999;
}
.pdf p {
padding: 1em;
}
.pdf object {
display: block;
width: 100%;
height: 100%;
border: solid 1px #666;
}
</style>
</head>
<body>
<div class="pdf">
<object data="BuildingSkillsinPython.pdf#toolbar=1&navpanes=0&scrollbar=1&page=1&view=FitW"
type="application/pdf">
<p>You do not seem to have a functional PDF plug-in for this browser.</p>
</object>
</div>
</body>Now, what the results look like. As Chrome and latest Firefox bring their own PDF support, the Adobe PDF plug-ins have no effect in these browsers.
Safari 6.05 without Adobe PDF plug-ins. Page up/down keys work, as do trackpad scrolling. Not much to love here.
Safari 6.05 with latest Adobe browser plug-ins. Improved user-friendly features. Scrollable, pageable, but no pagination buttons.
Google Chrome 27+ with mouse-over toolbar showing. Scrollable.
FIrefox 21. Now we have pagination buttons on the toolbar. Scrollable as well.
I am trying to do this is mobile safari so that it can be used on a iphone/ipad, to be more specific.
I need to display a PDF within html. I need suggestions. I have tried iframe and object, but the pdf it's self in not sized right.