embedding a PDF in an iframe

Report · Sep 12, 2020

I have a page with multiple content types viz. PDF, video, images etc. I need them to flow in the page. I am using an iframe to embed the content to the page. For each component I am only setting the width (say 100% of the page width) and expect the content to auto set its height.

My first challenge when using the Adobe embedAPI was because of the "requirement" that the embedded id be in the same window as when the AdobeDC component is called. I managed that by dynamically calling the adobeViewSdk inside the iframe and referencing an id that is dynamically created.

And here is where I am facing challenges. I would like the PDF to auto fit inside the iframe. and setting giving access to its height (offsetHeight) so that if required dynamically I can set the height of the component container. It is something like this.

<div id="pdf-container" style="width:100%">
   <iframe id="embed-pdf-iframe" style="width:100%; height:100%></iframe>
</div>

When I set the embedMode = 'IN_LINE', the PDF appears huge. Something with a height of 6500 and the content is huge. I was surprised at this. Since the width of the iframe does show to be the actual width of the container. But the embedded doc has a huge size.

When I set to 'SIZED_CONTAINER` it takes a standard size of 300 x 150 and the PDF gets accommodated in the height of 150.

Appreciate any help in pointing me in the correct direction. Thansks

Report · Sep 14, 2020

Hi Raju,
Your use-case looks very specific to me. Currently, In-Line embed mode is not optimized to be used within an iframe.
Thanks

Report · Sep 14, 2020

The IN_LINE embed mode is intended to be used to show the entire PDF (all pages) as though it were one very tall graphic. Unless a height for the container is specified, the height of the embedded view will be calculated based on the number of pages in the PDF and their sizes. If a height is set, the parent element will have a scroll bar and the viewing experience is a bit odd. All other embed modes will fill the size of the container so you'll need to set a height. If you don't set a height at all, the height is too short to be useful. Without a more detailed description and maybe some images of what you are trying to achieve, it's hard to provide a better recommendation.