Answered
Issue with IN_LINE embedMode Navigation in Modal Popup
I'm encountering a problem with the IN_LINE embedMode while using a modal popup. Upon clicking a button, the modal opens with a PDF loaded into its body. However, the navigation within the PDF, specifically moving from one page to another, is not functioning as expected. I'm seeking assistance to resolve this issue with the modal or to find a solution to hide the navigation, as it remains sticky within the modal. Any guidance or solutions would be greatly appreciated.
Below is index.html which I have created for POC.
<!DOCTYPE html>
<html>
<head>
<title>Adobe Acrobat Services PDF Embed API Sample</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="margin: 0px; height: 200px;">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#pdfModal">
Open PDF
</button>
<!-- PDF Modal -->
<div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="pdfModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="pdfModalLabel">PDF Viewer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="height: 500px;overflow-y: auto;">
<div id="adobe-dc-view"></div>
</div>
</div>
</div>
</div>
<!-- Adobe Viewer Script -->
<script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
var viewerConfig = {
embedMode: 'IN_LINE',
showAnnotationTools: false,
enableFormFilling: false,
showDownloadPDF: false,
showPrintPDF: false,
showZoomControl: false,
showLeftHandPanel: false,
height: 'inherit',
defaultViewMode: "", /* Allowed possible values are "FIT_PAGE", "FIT_WIDTH", "TWO_COLUMN", "TWO_COLUMN_FIT_PAGE" or "". */
};
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 of file where it is hosted */
location: {
url: "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"
},
},
metaData: {
/* file name */
fileName: "Bodea Brochure.pdf"
}
}, viewerConfig);
});
</script>
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
AdChoices