Re-Rending PDF's OnClick (Working Code)

New Here ,
Sep 09, 2022 Sep 09, 2022

Copy link to clipboard

Copied

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>

TOPICS
How to

Views

45

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 09, 2022 Sep 09, 2022

Copy link to clipboard

Copied

Wow, this is pretty freaking cool!

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
New Here ,
Sep 09, 2022 Sep 09, 2022

Copy link to clipboard

Copied

Thankssss!!!

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 Expert ,
Sep 13, 2022 Sep 13, 2022

Copy link to clipboard

Copied

LATEST

Nice work. I've shared your link internally.

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
Resources