How to get height of PDF document load in iframe

Question

Is there any way to get actual Height of PDF content loaded in iframe?

I am facing an issue to scroll PDF content in iPAD device? I can get the height of body content make scroll successfully, but only for HTML pages.

this.contentWindow.document.body.scrollHeight

but for PDF its not returning exact height of the PDF document? Is there any way to get for that?

Thanks

Peter

*exact height of the PDF document* individual PDF pages may have different dimensions. This, there is nothing like a height of the document. — mkl, Sep 04 '13 at 05:38

score 7 · Answer 1 · edited Aug 30 '20 at 08:19

I Tested this on my iPad and it works, maybe it could be good for you too. There is an HTML5 js project by mozilla that renders pdf file and displays them and you can get the viewport of a page in the pdf file. https://mozillalabs.com/en-US/pdfjs/ https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/hello.js

PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
  // Using promise to fetch the page
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

UPDATE 2020: The API of pdf.js changed slightly:

PDFJS.getDocument('helloworld.pdf').promise.then(function(pdf) {
  // Using promise to fetch the page
  pdf.getPage(1).then(function(page) {
    var viewport = page.getViewport({scale: 1.5});

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });
});

It works! Thanks. But one problem here, this solution is not 100% cross browser ( old IE i'm looking on you ). So it's also necessary to add browser detection. But it's fixed problem for iPad. — obenjiro, Sep 04 '13 at 10:22

score 2 · Answer 2 · answered Sep 03 '13 at 23:21

2

The answer is no (unfortunately).

Because at the element level, PDF object/embeds don't auto grow to take up more height if the document shown needs it, so their true height is never exposed to the DOM.

Even if you call a PDF directly by specifying it as the source of an iframe you'll see that the iframe has a DOM layout like any other page, with an object or embed of the pdf in the body anyway.

Inside this PDF 'element' is all the respective PDF plugin's territory, and cannot be accessed by javascript. There may be some flash, java or browser plugin that will allow you to interact with it but I haven't heard of it.

answered Sep 03 '13 at 23:21

Hashbrown

12,091
8
72
95

1

Actually there is one solution ( that usually works ) by @noam. It's need a little modification, but generally it good. – obenjiro Sep 04 '13 at 10:24
1

that's awesome, I'm one of the people that favourited the question because I needed a solution. After never finding one, and reasoning why, I left this here. I think that JS library renders the PDF itself so that's how it knows. But in keeping with the question being about an `iframe` it doesn't answer it. – Hashbrown Sep 04 '13 at 11:14
Well look. We use pdf-js to get pageCount and pageHeight. Now we can know document height. Then we set that value to iframe.style.height and that's it. I know that this is not a real answer, and you answer is actually the 'correct' one. But pdf-js is quite good 'hack'. – obenjiro Sep 04 '13 at 11:19

score 2 · Answer 3 · answered Sep 04 '13 at 09:06

Peter, there is no way you can get height of PDF in iFrame on iOS safari as there is no adobe reader safari plugin available for apple mobile devices. You can use HTML 5-Canvas to render PDF and open source client side libraries like pdfjs...etc...

Without that the only way you can get height[or width] is from server, use iTextSharp.dll kind of component and get the height/width of pdf page, which later you can multiply by number of pages, these all you can do easily on server side. Use the retrieved height/width to style your iFrame and then provide that PDF at source attribute of iFrame. iFrame will stretch and you will get scrolling effect.

OR

If you have any tool or component which can convert PDF to image then you just throw images from server on HTML, with javascript you can have control on getting attributes. We have MS-SSRS for our reporting need, for small part of application which is accessible on iPad we get images from MS-SSRS instead of PDF. The reason we adopted this option is because if number of pages increases then the client side framework like PDF-JS will die to render on canvas.

You have various options with you to handle PDF on iPad.

thanks for your answer, but pdf-js is good enouth, because we use pdf-js only to get 'height' of pdf, all rendering is happening by native iPad pdf displayer. — obenjiro, Sep 04 '13 at 10:29

score 0 · Answer 4 · edited May 23 '17 at 11:45

0

Does the view=fit pdf viewer option work for what you are trying to accomplish (Set auto height for iframe):

<iframe src="Path/MyPDF.pdf#view=fit"></iframe>

Also this solution setting the height to auto before trying to get the height (https://stackoverflow.com/a/11864824/1803682):

objIframe = document.getElementById('theIframeId');    
objIframe.style.height = 'auto';

document.body.scrollHeight

Finally - blog post here: http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/ and iScroll4 may be worth looking at.

edited May 23 '17 at 11:45

Community

1
1

answered Sep 03 '13 at 20:37

Matthew

9,851
4
46
77

the `viewFit` flag is for how the plugin should zoom the pdf, in this case we're telling it to fit the pages to the view width or height. Even in the link the accepted answer shows an iframe that has a scrollbar! How is that even accepted? Css height of `auto` won't work either because the plugin isn't communicating how large the content is to the browser (so it'll "auto" to the *default* anyway). If you manage to get it working edit [this fiddle](http://jsfiddle.net/QmLv5/2/). Basically, only the window should scroll (not the pdf) if you want to extract the height this way – Hashbrown Sep 04 '13 at 00:45
@Hashbrown Seems silly to think that the only solution is something like iScroll4 given how ubiquitous pdf files are. – Matthew Sep 04 '13 at 02:00

score -2 · Answer 5 · answered Sep 03 '13 at 22:11

-2

This can be solved by using the JQuery.

Lets us assume that you have the iframe as follows with an id

<iframe src="name.pdf" id="pdf_frame"></iframe>

now by using the JQuery we can make the height of the iframe as auto as you need to display the pdf inside the iframe.

$('#pdf_frame').css('height','auto');

You can get the height as

document.body.scrollHeight

answered Sep 03 '13 at 22:11

Bala Subramanyam

185
1
2
17

6

I don't know how this worked for you and the guys who upvoted you.. not working for me and I can't see reason how this code will work.. – Mr_Green Oct 30 '14 at 08:46

How to get height of PDF document load in iframe

5 Answers5