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

Answer 1

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

Answer 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.

Answer 3

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.