embedding a PDF in an iframe

Explorer ,
Sep 12, 2020 Sep 12, 2020

Copy link to clipboard

Copied

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

 

 

 

 

 

 

 

 

TOPICS
PDF Embed API

Views

96

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 14, 2020 Sep 14, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 14, 2020 Sep 14, 2020

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines