CODEWITHSUNDEEP
javascriptpdfiframe
peterkr
peterkr

Reputation: 421

How to get height of PDF document load in iframe

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

Upvotes: 6

Views: 20887

Answers (5)

noamtcohen
noamtcohen

Reputation: 4612

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);
  });
});

Upvotes: 7

Hi10
Hi10

Reputation: 541

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.

Upvotes: 3

Hashbrown
Hashbrown

Reputation: 13013

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.

Upvotes: 3

Bala Subramanyam
Bala Subramanyam

Reputation: 183

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

Upvotes: -3

Matthew
Matthew

Reputation: 9949

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.

Upvotes: -1

Related Questions