Blank pages at end of inline PDF

Community Beginner ,
Feb 17, 2021 Feb 17, 2021

Copy link to clipboard

Copied

We just started using the inline PDF viewer and love it. Thank you for making this! 👍

 

However, we are encountering a problem on longer documents.  The first pages appear fine. After some point, the pages are blank. For example, I have a 13 page document. I see pages 1-11, but 12 and 13 are blank. Oddly, if I hit the page down button a number of times (side note: the page up/down is glitchy), pages 12 and 13 will eventually appear. Below is a screen shot.

 

Thank you for your help!

 

pdf viewer pages missing.png

 

TOPICS
PDF Embed API

Views

164

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

correct answers 1 Correct Answer

Community Beginner , Feb 18, 2021 Feb 18, 2021
We found a solution. The trick to "train" the viewer on the context is to pass the containing div id to parentDivId in the AdobeDC.View config. We fixed it by adding this line to our code: adobeDCViewConfig.parentDivId = 'nxm-full-page'; Here's a more complete code snippet for the inline viewer: var adobeDCViewConfig = { clientId: "<client code>", divId: "order-terms-pdf-preview" }; ...

Likes

Translate

Translate
Community Beginner ,
Feb 17, 2021 Feb 17, 2021

Copy link to clipboard

Copied

PS the "page down" button I reference above is the one in the Adobe toolbar

adobe toolbar page down button.png

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 ,
Feb 17, 2021 Feb 17, 2021

Copy link to clipboard

Copied

Can you share the PDF in question and can you send the post the code snippet you used for embedding?

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
Community Beginner ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

Thank you for your help, @Joel_Geraci 

 

The code we are using is the default for inline viewing:

 

<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {embedMode: "IN_LINE"});
	});
</script>

We just replaced the client ID and file name and it works. Attached is the sample file we are using.

 

In doing some additional testing, I have a clue to the source of the problem.  We have two ways of viewing this content: (1) in a regular web page (2) in a full page modal.  The problem I was experiencing above was when viewing in a full page modal.  So, I was curious to see if the behavior is any different when viewing in a regular web page.  It turns out that everything works perfectly when in a regular web page - I see all the pages and there's no glitchiness in the toolbar and pagination:

 

inline pdf viewer in regular web page.png

 

So, it seems our problem is limited to using the inline PDF viewer in a modal.  Perhaps it is looking to the underlying web page vs the modal for context? That might explain why the toolbar is glitchy and pages 12-13 don't load.

 

Is there some way for us to "train" the PDF viewer to its context in our code?

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 ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

Is the "lightbox" mode a possibility? This would let you get around the modal.

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
Community Beginner ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

We found a solution. The trick to "train" the viewer on the context is to pass the containing div id to parentDivId in the AdobeDC.View config. We fixed it by adding this line to our code:

 

adobeDCViewConfig.parentDivId = 'nxm-full-page';

 

Here's a more complete code snippet for the inline viewer:

 

                        var adobeDCViewConfig = {
                            clientId: "<client code>",
                            divId: "order-terms-pdf-preview"
                        };
                        if ( Bionic.View.Page.isFullPage() ){
                            adobeDCViewConfig.parentDivId = 'nxm-full-page';
                        }
                        var adobeDCView = new AdobeDC.View(adobeDCViewConfig);
                        adobeDCView.previewFile({
                            content:{location: {url: orderTermsDocument.url}},
                            metaData:{fileName: orderTermsDocument.fileName}
                        }, {embedMode: "IN_LINE"}); //SIZED_CONTAINER

 

It's working like a champ now in the full page modal and regular web page. I see all the pages and no more glitchiness in the Adobe toolbar. Here's a screenshot:

 

pdf viewer fixed.png

 

I love this PDF viewer! 😁👍:hundred_points:

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 ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

Thanks. Ignore my previous question. Please keep us posted as to your progress. I love seeing this stuff out in the real world.

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
Community Beginner ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

LATEST

Thanks for your help, @Joel_Geraci !  I'll keep you posted.

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