PDF Object

이전 mozilla PDF.js를 사용한 PDF VIEWER를 포스팅 해봤었다.

 

그런데 mozilla PDF외에 PDF Object를 발견해 한번 적용연습을 해봤다.

 

 

※예제 참고

https://pdfobject.com/#api

PDFObject: A JavaScript utility for embedding PDFs

 

---

script

pdfobject.min.js 필수

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<style>
	/*
	PDFObject appends the classname "pdfobject-container" to the target element.
	This enables you to style the element differently depending on whether the embed was successful.
	In this example, a successful embed will result in a large box.
	A failed embed will not have dimensions specified, so you don't see an oddly large empty box.
	*/
	
	.pdfobject-container {
		width: 100%;
		max-width: 100%;
		height: 100%;
	}
</style>

<script src="/Web-home/pdfobject.min.js"></script>


<script>
	$(document).ready(function () {
		 var options = {
			pdfOpenParams: {
				navpanes: 0,
				toolbar: 0,
				statusbar: 0,
				view: "FitV",
				pagemode: "",
				page: 1
			}
			,forcePDFJS: true
            //[PDFJS_URL]mozila PDF viewer.html 
            //https://mozilla.github.io/pdf.js/getting_started/#download 참고
			,PDFJS_URL:"/Web-home/pdfjs/web/viewer.html"
		};
		var myPDF = PDFObject.embed("해당 pdf 경로", "#pdfContent", options);
		console.log("myPDF : "+myPDF);
		var el = document.querySelector("#results");
		el.setAttribute("class", (myPDF) ? "success" : "fail");
		el.innerHTML = (myPDF) ? "PDFObject was successful!" : "Uh-oh, the embed didn't work.";
	});
</script>

pdfobject.min.js

0.00MB

pdfjs-2.2.228-dist.zip

4.01MB

※참고

Getting Started

---

HTML

 

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>

<div class="application" style="height:80%"> 
  	<div id="results" class="hidden"></div>
	<div id="pdfContent" style="height:100%"></div>
</div>

---

 

 

※코드 생성기도 제공하니 참고

Code Generator

PDFObject: Code Generator

 

---

UI