18

I need to scale a PDF file to fit the iFrame. It needs to be responsive, so the PDF should scale with the device width so that the PDF document displays a complete page.

If there is a free plugin or a function in Bootstrap to make this happen, I would be happy to hear about it.

Thanks in advance!

Luuxter
  • 205
  • 1
  • 3
  • 7
  • Please include the code you've written so far. The more details you provide, the more answers you are likely to receive. Check the [FAQ](http://stackoverflow.com/tour) and [How to ask](http://stackoverflow.com/help/how-to-ask). – Roald Nefs Feb 19 '17 at 12:29
  • Does this answer your question? [Zoom to fit: PDF Embedded in HTML](https://stackoverflow.com/questions/20562543/zoom-to-fit-pdf-embedded-in-html) – Klesun Jan 31 '20 at 13:12

3 Answers3

38

If you are asking how you can resize the PDF to fit the Iframe.

This following code may help:

<iframe src="name.pdf#zoom=50" height="100%" width="100%"></iframe>

By adding the #zoom=50 it will show the PDF with zoom in the iframe as default. (This can be edited to any number you want)

  • 1
    [All Options](https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf) – Klesun Jan 31 '20 at 13:11
  • 1
    Your code uses filename to load the pdf. What if I want to load a pdf from object data url, and then resize it? – Srk95 Jul 15 '20 at 10:42
  • 2
    This works in chrome as well as with blobs made with URL.createObjectUrl(blob). ie URL.createObjectURL(blob) + '#zoom=FitW' (FitW to fit width for my specific needs, which I got from kuz1toro's answer below). – Jarrod Juleff Aug 31 '20 at 07:14
6

in firefox for me it work like this, dont test it on other though

<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>
kuz1toro
  • 91
  • 1
  • 2
  • 1
    Swapped out FitH for FitW to suite my needs. On Chrome. Appended it to the end of a blob referenced with URL.createObjectURL(blob) as well. URL.createObjectURL(blob) + '#zoom=FitW' – Jarrod Juleff Aug 31 '20 at 07:10
3

You probably won't be able to achieve this with any degree of consistency. You will be able to have the PDF viewer in the iFrame be responsive but each viewer will behave differently as far as displaying the PDF if no initial view is set... and each PDF where the initial view is set may have a different default zoom and page mode.

If you are in control of the PDF files, it's worth setting the initial view but, even then, you are still at the mercy of the different viewers built into the browsers and browser plug-ins to determine how that initial view is interpreted.

joelgeraci
  • 4,606
  • 1
  • 12
  • 19
  • I answered this question here: https://stackoverflow.com/questions/18478120/how-to-set-fit-width-when-embedding-pdf-in-chrome/71951975#71951975 It requires creating an iframe, so it may not be ideal, but my solution provides some reusable code that I use on my websites. HTH! – Realto619 Apr 21 '22 at 10:14