<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.

External JavaScript

  1. https://documentcloud.adobe.com/view-sdk/main.js