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/

emersonthis
  • 32,822
  • 59
  • 210
  • 375
  • possible duplicate of [Is it possible to have a PDF file open at a predefined magnification in Adobe Reader?](http://stackoverflow.com/questions/770473/is-it-possible-to-have-a-pdf-file-open-at-a-predefined-magnification-in-adobe-re) – winner_joiner May 13 '14 at 07:49
  • check this links out: [SO - Q->A](http://stackoverflow.com/questions/770473/is-it-possible-to-have-a-pdf-file-open-at-a-predefined-magnification-in-adobe-re) and [parameters page 6](http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf) – winner_joiner May 13 '14 at 07:50
  • @winner_joiner: this method does not affect the pdf viewer in browsers – dashhund Jun 03 '14 at 21:53
  • @dashhund: what exactly do you mean? -> the parameter should affect the way the pdf is displayed in the viewer-object (check (Doku)[http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf]). it probably depence on the Browser and plugin version. the viewer-object itself can only be resized with html/css means. or am i not understanding, what you are hinting at? – winner_joiner Jun 04 '14 at 09:13
  • @winner_joiner: i mean that the pdf is still displayed in the same way in the viewer object on all browsers i tested it on. It seems to only have an effect when opening in reader or acrobat. (link slightly wrong btw) – dashhund Jun 04 '14 at 10:49
  • @dashhund: thanks 4 the info about the link, the link is the same as above, the acrobat docu. I just tested it again(IE 11), and it works. **btw: the question was aimed at IE8+**, not all browsers (see and of the question) this link -> [Link to doku](http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf?#zoom=300) should open the docu zoomed at 300% when open with IE (or at least IE11, didnt want to start my VM for older versions) – winner_joiner Jun 04 '14 at 16:17
  • An alternative is to convert PDF to image. I don't think you can set all browsers to display same, cause they use different rendering software (Chrome has its own PDF viewer for example, which is hard to change for 'normal' users) – skobaljic Jun 18 '14 at 12:32

6 Answers6

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>
Community
  • 1
  • 1
dhanasekar
  • 1,228
  • 13
  • 16
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;
}
C. David Maxey
  • 151
  • 1
  • 5
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/

chrwahl
  • 8,675
  • 2
  • 20
  • 30
  • 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 05 '14 at 11:21
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.

dig99
  • 116
  • 1
  • 6
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>
Surya R Praveen
  • 3,393
  • 1
  • 24
  • 25
  • 3
    the responsive width refers to the actual pdf inside the pdf-viewer object, not the object hosting the pdf-viewer – dashhund Jun 03 '14 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>
René
  • 1