[HTML] HTML로 페이지에 PDF파일 띄우기

HTML로 화면에 PDF 파일 출력 하기..!

PDF 파일을 화면단에 출력하고 있는 페이지가 있어서,

공부 겸, 정리 겸 원리를 파악(?) 해 보았다,, 생각보다 엄청나게 간단해서 당황; 😮😮😮

 

이렇게 PDF 파일이 나타난다.

다른 사이트에 연습삼아 PDF 기능을 추가해 본 건데, 

직접 만든 PDF 파일인 팝업차단 해지 안내용 문서를 넣어보았다ㅋㅋ 뭐 내용이 중요한 건 아니고,,

위 이미지처럼 PDF의 내용과 함께 목차, 페이지수, 인쇄, 다운로드 기능이 나타나는 건데,,!

단순히 section태그와 iframe태그를 사용한다니!?

 

<div>
 	<section class="pdf-viewer">
		<iframe src="${pageContext.request.contextPath}/pdf/220727.pdf"></iframe>
	</section>
</div>

 

파일을 복사해 넣은 위치만 잘 찾아서 iframe의 src에 파일명.확장자 까지 넣어주면 되고,

section 태그 class에 pdf-viewer를 넣어주기만 하면 짠..!

완전 쉽게 페이지에 PDF 파일 내용을 출력할 수 있다. 신기👏

 

물론 style를 주어야 이뻐지는데, 

<style>
.pdf-viewer iframe{width: 100%; height: 930px; border: 1px solid #ddd; position: relative; z-index: 1;}
</style>

CSS style는 위 내용처럼 주면 첨부한 이미지와 같은 pdf화면을 만날 수 있다.👍👍

width나 height는 편한대로 바꾸어주면 더 굿굿 나이스~

 

완전~ 간단하고 쉽게 PDF 화면에 뿌려주기 끝! 

도움이 되었다면 로그인하지 않아도 가능한 공감♡꾹 부탁드려요~