Javascript - PDF 뷰어 처리하기(웹 페이지 pdf파일 읽기)

사실 단순한 pdf파일을 보이게만 하는건 몇몇 태그를 활용하여 쉽게 처리가 가능합니다.

 

iframe

<iframe src="/image/test.pdf" style="width:700px;height:700px;"></iframe>

IE를 제외하고 firefox, chrome, edge등 모두 정상적으로 뷰어 동작을 하는것을 볼 수 있습니다.

IE에서는 다운로드 이벤트가 발생합니다.

 

 

 

embed

<embed src="/image/test.pdf" type="application/pdf" width=700px height=700px/>

iframe과 비슷하지만 type과 넓이 높이를 따로 지정해줘야 합니다.

마찬가지로 IE를 제외하고 전부 정상 동작하는것을 볼 수 있습니다.

 

 

 

 

PDFObject

pdfobject.com/

PDFObject: A JavaScript utility for embedding PDFs

PDF를 읽어서 뷰어 역할을 해주는 훌륭한 js 라이브러리입니다.

해당 브라우저에서 PDF를 읽지못한다면 특정 메시지와 함께 다운로드를 제공하고 있습니다.

 

IE에서 동작이 안되는 브라우저는 친절하게 다운로드 링크를 제공한다.

 

사용법은 생각보다 간단합니다.

위의 URL을 통해 PDFObject를 다운로드 받은 후, PDFObject를 연결줍니다.

<div id="myPdf"></div>
<script type="text/javascript" src="/js/common/component/PDFObject/pdfobject.js"></script>

PDFObject.embed("/image/guide.pdf", "#myPdf");

첫번째 파라미터는 pdf파일 위치를 두번째 파라미터는 만들어줄 타겟 대상을 입력합니다.

 

 

full 버전으로 잘 읽힙니다.

 

세번째에는 옵션값을 넣을 수 있습니다.

var option = {
		height: "400px",
		pdfOpenParams: {view: 'FitV', page: '2'}
}
PDFObject.embed(RESOURCES_PATH + "/image/test.pdf", "#myPdf", option);

높이가 400으로 줄었습니다.

높이를 400으로 줄여보았습니다.

 

 

그럼 이쯤에서 IE에서는 pdf 뷰어를 못하나요? 궁금해하실텐데 IE11에서만 동작하긴 하지만 또 방법이 있습니다.

 

 

 

 

PDF.js + PDFObject.js

먼저 알아보았던 PDFObject에 Pdf.js를 활용하면 가능합니다.

뷰어처럼 동작하도록 뼈대의 프레임 html을 사용하고 각 태그별에 맞는 이벤트 동작을 제공합니다.

 

mozilla.github.io/pdf.js/

PDF.js

해당 URL에서 PDF.js를 다운로드 하실 수 있습니다.

PDFObject와 같은 위치에 다운로드한 파일들을 옮겨줍니다.

 

이번에는 div태그에 사이즈를 입력해야합니다.

<div id="myPdf" style="width:550px;height:400px;"></div>
<script type="text/javascript" src="/js/common/component/PDFObject/pdfobject.js"></script>

var option = {
	pdfOpenParams: {
		navpanes: 0,
		toolbar: 0,
		statusbar: 0,
		view: "FitV",
		page: 1
	},
	width : "550px",
	height: "400px",
	forcePDFJS: true,
	PDFJS_URL: "/js/common/component/PdfJs/web/viewer.html"
}
PDFObject.embed("/image/test.pdf", "#myPdf", option);

 

 IE11기준에서만 동작하긴 하지만 아래와 같이 익스에서도 pdf뷰어 기능을 구현할 수 있습니다.