JSFiddle - React, Tailwind, and code Playground

by litespeedtdf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.0.201604172/pdfobject.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js"></script>
<div id="results" class="hidden"></div>

<div id="pdf"></div>

CSS

.pdfobject-container {
	width: 100%;
	max-width: 600px;
	height: 600px;
	margin: 2em 0;
}

.pdfobject { border: solid 1px #666; }
#results { padding: 1rem; }
.hidden { display: none; }
.success { color: #4F8A10; background-color: #DFF2BF; }
.fail { color: #D8000C; background-color: #FFBABA; }

JavaScript

var options = {
	pdfOpenParams: {
		navpanes: 0,
		toolbar: 0,
		statusbar: 0,
		view: "FitV",
		pagemode: "thumbs",
		page: 2
	},
	forcePDFJS: true,
	PDFJS_URL: "/pdfjs/web/viewer.html"
};

var myPDF = PDFObject.embed("/pdf/sample-3pp.pdf", "#pdf", options);

var el = document.querySelector("#results");
el.setAttribute("class", (myPDF) ? "success" : "fail");
el.innerHTML = (myPDF) ? "PDFObject was successful!" : "Uh-oh, the embed didn't work.";