<html>
<head></head>
<body>
<h1>Cats are Everything</h1>
<p>
Cats are so incredibly awesome that I feel like
we should talk about them more. Here's a PDF
that talks about how awesome cats are.
</p>
<!-- PDF here! -->
<button id="showPDF" disabled>Show PDF</button>
<p>
Did you like that? Was it awesome? I think it was awesome!
</p>
</body>
</html>body {
background-color: darkolivegreen;
margin: 50px;
}
h1, p {
font-family: Arial;
color: white;
}
const ADOBE_KEY = 'b9151e8d6a0b4d798e0f8d7950efea91';
if(window.AdobeDC) enablePDF();
else {
document.addEventListener("adobe_dc_view_sdk.ready", () => enablePDF());
}
function enablePDF() {
let btn = document.querySelector('#showPDF');
btn.addEventListener('click', () => displayPDF());
btn.disabled = false;
}
function displayPDF() {
console.log('Lets do some AWESOME PDF stuff!');
let adobeDCView = new AdobeDC.View({clientId: ADOBE_KEY });
adobeDCView.previewFile({
content:{location: {url: "https://static.raymondcamden.com/enclosures/cat.pdf"}},
metaData:{fileName: "cat.pdf"}
},
{
embedMode: "LIGHT_BOX"
});
}
External CSS
This Pen doesn't use any external CSS resources.