Skip to main content
Participant
Sep 9, 2022 3:08 PM UTC
Question

Re-Rending PDF's OnClick (Working Code)

Hello. I just wanted to share a fun little web app I made with the adobe pdf API.  It's a sheet music repertoire that loads new pdf files with the click of a new song.  It was a bit of a struggle to figure out the code, so I hope it might help someone else! 

 

Here's the site: https://www.clairmusic.com/apollo

Bellow is the code!

 

<!--Adobe PDF reader -->

<script src="https://documentcloud.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">

function renderPdf(fileName, url) {
console.log(fileName, url);
var adobeDCView = new AdobeDC.View({ clientId: "<ID>", divId: "adobe-dc-view" });
adobeDCView.previewFile({
content: { location: { url }},
metaData: { fileName }
}, {
embedMode:"FULL_WINDOW",
focusOnRendering: false,
defaultViewMode: "FIT_WIDTH",
enableSearchAPIs: false,
showZoomControl: false,
});
}

$('.piecenamecontainer').on('click', function () {renderPdf($(this).find('.piecename').text(), $(this).find('.pdf').text()) });
document.addEventListener("adobe_dc_view_sdk.ready", function () { renderPdf("<initial name>", "<Inital pdf URL>") });

</script>

This topic is closed to new replies. Start a new post to keep the conversation going.

3 replies

Joel Geraci
Community Expert
Community Expert
Sep 13, 2022 5:09 PM UTC

Nice work. I've shared your link internally.

Translate
Raymond Camden
Community Manager
Community Manager
Sep 9, 2022 3:13 PM UTC

Wow, this is pretty freaking cool!

Translate
Participant
Sep 9, 2022 3:41 PM UTC

Thankssss!!!

Translate