Menu
I'm embedding pdf files using something like this:
<div class="graph-outline">
<object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>
</div>
It works but I want to set the pdf width to match the width of the containing div. Currently it shows up like an iframe with scrollbars, so to view the entire pdf, you have to scroll right to left. I want the pdf to fit the width of the container.
How do I fix this? I'm supporting IE8 and up.
Here is a jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/
618
To make the content of PDF document responsive, we need to pull all the data out of the PDF file and write them to another format that supports responsive layout. Accessing and recognizing elements of the PDF file is not easy. But fortunately, our PDFix SDK Library can do that and the results are very precise!
All you need to do is add #view=fitH to the end of the source attribute. That's it! fitH stands for fit horizontal, and this will make the PDF in our iframe fit the width of the screen.
To attach a file, go to Insert > Attach File in PDF. To embed a file, go to Insert > Embed File in PDF. Browse to and select the file that you want to insert, and click Select on the Select File dialog.
Using an iframe tag is the second way to embed a pdf file in an HTML web page. In web development, web developers use the iframe tag to embed files in various formats and even other websites within a web page. Due to its wide compatibility, the iframe tag is widely used for embedding pdf.
How to embed PDF viewer in HTML ¶. Another way of adding a PDF file to your HTML document is using the <iframe> tag. It allows setting your preferred width and height as well. To have the code, follow these simple steps: To specify the web address of your PDF file, set the source. Both of the mentioned properties can be specified by "px", "cm", ...
I think pdfs are as responsive as large amounts of tabular data - they arent. I dont think there is anything you can do because it is a fixed size - sure you can reduce the size in the browser window but its unreadable.
Generally, a hyperlink is used to link a PDF document to display in the browser. HTML anchor link is the easiest way to display a PDF file. But if you want to display PDF document on the web page, PDF file need to be embedded in HTML. The HTML < embed > tag is the best option to embed PDF document on...
The size of the iframe is responsive, but the PDF inside is not. I’ll keep this quick. All you need to do is add #view=fitH to the end of the source attribute. That’s it! fitH stands for fit horizontal, and this will make the PDF in our iframe fit the width of the screen.
Simply do this:
<object data="resume.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="resume.pdf">click here to
download the PDF file.</a></p>
</object>
If you're using Bootstrap 3, you can use the embed-responsive class and set the padding bottom as the height divided by the width plus a little extra for toolbars. For example, to display an 8.5 by 11 PDF, use 130% (11/8.5) plus a little extra (20%).
<div class='embed-responsive' style='padding-bottom:150%'>
<object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object>
</div>
Here's the Bootstrap CSS:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
I did that mistake once - embedding PDF files in HTML pages. I will suggest that you use a JavaScript library for displaying the content of the PDF. Like https://github.com/mozilla/pdf.js/
3
<embed src="your.pdf" type="application/pdf#view=FitH" width="actual-width.px" height="actual-height.px"></embed>Check this link for all PDF Parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=7
Chrome has its own PDF reader & all parameter don't work on chrome. Mozilla is worst for handling PDFs.
3
<html>
<head>
<style type="text/css">
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;}
</style>
</head>
<div id="wrapper">
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%">
<p>Your web browser doesn't have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click
here to download the PDF</a></p>
</object>
</div>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
