HTML PDF 뷰어, 웹문서 내에서 자바스크립트를 사용하지 않고 pdf 파일 내용을 뷰어로 바로 보여주거나 새 탭 또는 새창으로 열어 보여주는 3가지 방법입니다.
HTML PDF 뷰어 샘플 이미지
HTML PDF 뷰어
아래 3가지 태그를 이용하면 자바스크립트 없이 HTML 문서에 PDF파일 내용을 보여줄 수 있습니다. IE 브라우저가 종료되면서 자바스크립트 도움 없이 할 수 있는 것들이 많아진 것 같아요.
HTML 태그 iframe과 object 그리고 embed 태그의 쓰임이 매우 유사한데요 각 태그를 사용해 웹페이지에 pdf 파일을 넣는 방법을 알아보겠습니다.
iframe 태그
iframe(인라인 프레임) 태그는 현재 페이지 내에 다른 html 문서(웹페이지)를 삽입하는 용도이지만 html 문서 외에도 유튜브 동영상, 구글 지도, 코드블록 등을 다양한 외부 콘텐츠를 표시할 수 있습니다.
<iframe src="example.pdf" title="example" width="100%" height="500" frameborder="0"></iframe>iframe 태그는 대체 텍스트로 title 속성을 사용합니다.
object 태그
object태그는 이미지, 오디오, 비디오등을 표시하거나 브라우저 플러그인을 포함해야 하는 플래시 애니메이션, 자바 애플릿, ActiveX 컨트롤 등을 실행할 수 있습니다.
참고 : 현재 최신 브라우저에서는 더 이상 플래시 애니메이션, 자바 애플릿, ActiveX 컨트롤은 지원되지 않습니다.
<object data="example.pdf" type="application/pdf" alt="example" width="100%" height="500">
<p>PDF 파일을 불러오는 데 실패했습니다. <a href="example.pdf">다운로드 링크</a>를 클릭하세요.</p>
</object>object 태그는 대체 텍스트로 alt 속성을 사용하며, type 속성이 필요합니다. 그리고 pdf 뷰어를 지원하지 않는 브라우저에서는 대체 수단(fallback)을 사용할 수 있으며 PARAM 요소를 추가할 수 도 있습니다.
embed 태그
embed 태그는 object 태그와 거의 유사한 용도로 사용되는데요, object 태그와 다른 건 자식 요소를 추가할 수 없으며 대체 텍스트 속성도 지원되지 않습니다.
<embed src="example.pdf" type="application/pdf" aria-label="example" width="100%" height="500">embed 태그 대체 텍스트 속성이 없습니다. 다신 aria-label 속성을 사용할 수 있습니다. 그리고 type 속성이 있어야 합니다.
a태그(링크)
웹페이지내에 링크를 사용하면 새창 또는 새탭에 pdf 파일을 열어 볼 수 있습니다.
<p>PDF 파일<a href="example" target="_blank">바로 보기</a>.</p>각각의 태그는 장단점은 있지만 단순히 pdf 파일을 넣는 경우에는 a태그 제외 하고는 어떤 태그를 사용해도 또 같은 결과입니다.
참고로 워드프레스의 경우 pdf 파일을 삽입하면 object 태그를 사용해 자동으로 만들어 줍니다.
이상으로 웹문서 내에 pdf 파일을 포함시켜 보여주는 방법을 알아보았습니다.
