1

I have a PDF embedded in an iframe, which is contained in a DIV so I have control of its scroll position. The height is dynamically calculated based on the page length of the PDF which is stored in the database.

It works with small documents (< 10 pages), but once you hit 30 pages, it ends up showing as just black. If I zoom out on the browser to 33%, then it starts to show up.

Here's the code:

<div id="document_pdf-wrapper" height="800px">
    <iframe src="filepath.pdf#zoom=100&amp;scrollbars=0" width="1200px" height="{{ document.page_length * 1085 }}px" /></iframe>

Anyone know why it's showing up as black but only when the pdf is >35 pages?

Thanks.

Edit: So the way I was doing it was calculating the height of the iframe, and it turns out that after around 20 pages, the height becomes too large and shows black for the PDF. Anyone know a work-around?

Phillip Y.
  • 517
  • 5
  • 18
  • You could try adding it in the same way as this http://stackoverflow.com/questions/19654577/html-embedded-pdf-iframe – Riley Aug 24 '16 at 15:52
  • Hmm, yeah this works but so does setting a static height. But without a dynamic height, I can't do the functionality where the user must scroll down to the end of the PDF to enable a checkbox. I'll check it out some more. – Phillip Y. Aug 24 '16 at 18:28
  • So I was able to get it working where the height is calculated based on the page number. But if the page length is too long, it's still showing a black screen (because the iframe/embed/ or whatever you use has a height limit). Anyone know how to get around that? – Phillip Y. Sep 13 '16 at 12:55
  • Did you ever figure it out? – JayBee May 29 '19 at 16:06
  • I ended up using pdf.js – Phillip Y. Jun 17 '19 at 01:28

0 Answers0