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!
1 Correct answer
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"
};
8
Replies
PS the "page down" button I reference above is the one in the Adobe toolbar
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:
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?
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:
I love this PDF viewer! 😁👍:hundred_points:
AdChoices