Zoom to fit: PDF Embedded in HTML

Question

I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zoom.

 <embed src="filename.pdf?zoom=50" width="575" height="500">

does anyone know how to modify the code so its initial zoom is set to fit the object size.

What about [this](http://stackoverflow.com/questions/16468961/how-to-embed-pdf-file-with-responsive-width)? — Irgendw Pointer, Dec 13 '13 at 09:06
the modifier I have in the code right now is not effecting the zoom of the pdf file, I need to figure out how to make the zoom fit to the object initally — user3024833, Dec 13 '13 at 09:48

Rich · Answer 1 · 2018-07-13T12:44:33.173

255

Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.

Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:

filename.pdf#view=FitH

What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.

For a full list of available parameters see this doc

EDIT: (lazy mode on)

edited Jul 13 '18 at 12:44

answered Jan 05 '14 at 14:35

Rich

4,572
3
25
31

3

This was great. How do I force it to refit the page to `FitH` when I resize the browser window? – Vishal Aug 20 '16 at 20:15
5

The documentation for the parameters in the URL, mentioned above, has moved to this link https://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf – RominNoodleSamurai Feb 08 '17 at 00:21
3

Why are you not the voted answer :) Thank you very much! – Martin Eckleben May 12 '17 at 14:28
Is there a way to change the color of the background container of the element? I see gray outside the document but inside the element. I'd prefer it to be transparent or inherited from the element. – Vishal Oct 02 '18 at 02:51
1

I was not able to make it work in Edge. The browser ignored the parameters. Chrome supports at least some of them (e.g. view, zoom, page). – Josef Bláha Sep 25 '19 at 15:24
What if I want to load pdf from object data url and not using a filename.pdf? – Srk95 Jul 15 '20 at 10:44
I came back to this answer a year or two later and it saved me again - 2 votes earned if I could! – koopmac Apr 27 '21 at 04:33
3

Using Wayback machine, I found the old link with the full list: https://web.archive.org/web/20140610174148/https://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf – AuRise Nov 19 '21 at 18:39

score 29 · Answer 2 · answered Aug 20 '15 at 19:25

29

For me this worked(I wanted to zoom in since the container of my pdf was small):

    <embed src="filename.pdf#page=1&zoom=300" width="575" height="500">

answered Aug 20 '15 at 19:25

nazbouy

391
3
3

2

#zoom=50 or #page=2&zoom=300 work perfectly both in chrome and IE. IE only seems to be responding to #view=Fit. More IE params here: http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf – Sergiu Z Jun 30 '16 at 22:11
1

I had a multiple page PDF and #zoom=100 worked for me. – adrianp Nov 02 '16 at 02:17

score 7 · Answer 3 · edited Mar 21 '16 at 18:20

7

This method uses "object", it also has "embed". Either method works:

<div id="pdf">
    <object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
    <!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
    </embed> -->
    <p>System Error - This PDF cannot be displayed, please contact IT.</p>
    </object>
</div>

edited Mar 21 '16 at 18:20

Alexander O'Mara

58,688
18
163
171

answered Mar 21 '16 at 18:05

SR Harvey

71
1
2

from the docs object or embed doesn't support percentage. – Junius L Apr 26 '22 at 08:56

score 4 · Answer 4 · answered Aug 19 '21 at 08:32

Followed @Rich answer, I used view=FitH in my code to view PDF content base64 in Angular as below.

I shared for whom concern about view base64 content PDF file with object tag using Angular framework.

The option for view PDF

this.pdfContent =
      URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
      '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';

Read PDF content from API as

let content = DataHelper.getDataFromAPI();

When click show content button use

showData() {
    let content = DataHelper.getDataFromAPI();

    this.pdfContent =
      URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
      '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';

    this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
  }

In HTML file use object tag as

<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>

Link Angular demo https://stackblitz.com/edit/angular-ivy-tdmieb

kuz1toro · Answer 5 · 2019-07-14T09:21:54.793

3

just in case someone need it, in firefox for me it work like this

<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>

edited Jul 14 '19 at 09:21

answered Jul 14 '19 at 09:16

kuz1toro

91
1
2

score 1 · Answer 6 · answered Jun 16 '14 at 00:40

1

Bit late response to this question, however I do have something to add that might be useful for others.

If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH

answered Jun 16 '14 at 00:40

raf

267
1
5

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:16

score 1 · Answer 7 · answered Apr 21 '21 at 14:15

1

This works fine for me

<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />

answered Apr 21 '21 at 14:15

Jimut123

474
5
14

score 0 · Answer 8 · answered Mar 17 '15 at 06:11

0

Use iframe tag do display pdf file with zoom fit

<iframe src="filename.pdf" width="" height="" border="0"></iframe>

answered Mar 17 '15 at 06:11

anilglpl

9
3

Zoom to fit: PDF Embedded in HTML

8 Answers8

Linked

Related