44

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/

Improve this question
7

6 Answers 6

Reset to default
41

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>
Improve this answer
3
  • This works well, created dabblet.com/gist/1cddeeb1cbc89f0a9061 to test this out too, play around with the widths and height
    – Carlton
    Jul 29, 2015 at 14:50
  • I see horizontal scrollbars on mobile sizes. Doesn't seem to be entirely responsive.
    – user1729506
    Apr 19, 2019 at 15:20
  • 1
    No this does not work. @Carlton the example you shown also does not work.
    – Sushank Dahiwadkar
    Jul 7, 2019 at 9:02
15

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;
}
Improve this answer
4 

<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.

Improve this answer
3

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/

Improve this answer
1
  • It's not perfect unfortunately. But a lot of the PDFs I've tried look terrible because of a font problem. (Chrome 38/Windows 7)
    – dakotapearl
    Nov 5, 2014 at 11:21
1 
<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>
Improve this answer
1
  • 3
    the responsive width refers to the actual pdf inside the pdf-viewer object, not the object hosting the pdf-viewer
    – dashhund
    Jun 3, 2014 at 21:55
0

Seen from a non-PHP guru perspective, this should do exactly what us desired to:

<style>
    [name$='pdf'] { width:100%; height: auto;}
</style>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.