HTML 내부에 PDF 파일 삽입하기

html 문서에서 pdf 파일을 '링크(link)'하지 않고 '삽입(embed)'하는 방법에 대해 정리한다.

embed 태그를 이용한 방법

embed 태그에 MIME type과 URI를 지정하면 HTML 내부에 pdf 파일이 삽입된다. 구 버전 HTML에서는 embed 태그에 pluginpage라는 속성(attribute)이 있어서 PC에 적절한 플러그인이 설치되어 있지 않은 경우 해당 플러그인을 설치할 수 있는 페이지로 연결시킬 수 있었지만 HTML5에서는 이 속성이 폐지(deprecated)되었다. 즉, 사용하면 안 된다.

<embed type="application/pdf" src="{PDF}" width="{폭}" height="{높이}" />

object 태그를 이용한 방법

그러나 stackoverflow에 따르면 embed보다는 object를 쓸 것을 권장하고 있다. embed 태그와 object 태그는 HTML5에서 둘 다 표준으로 인정되고 있지만, object 태그를 사용하면 현재 브라우저가 적절한 플러그인을 제공할 수 없다 하더라도 object 태그에 싸인 대체 콘텐츠가 렌더링될 수 있다고 한다. 또한 object 태그로 둘러싸인 콘텐츠는 서버에 요청(http-request)되는 기능을 갖고 있다고 한다. 요약하면, 브라우저가 적절한 플러그인을 제공할 수 없을 때에도 대체 콘텐츠가 온전하게 표시된다는 의미이다.

기본 형태

먼저 object 태그를 통해 다음과 같이 PDF 파일을 삽입할 수 있다. embed와 마찬가지로 MIME type과 URI를 지정하면 된다. 구 버전 HTML에서는 clsid라는 속성(attribute)으로 PC에서 특정 플러그인을 불러올 수 있고, 해당 플러그인이 없을 때는 codebase라는 속성(attribute)으로 그 플러그인을 다운로드할 주소를 지정했다. 다름아닌 ActiveX Control을 불러오는 기능이기에 HTML5에서는 이 속성이 폐지(deprecated)되었다. 즉 사용하면 안 된다.

<object type="application/pdf" data="{PDF}" width="{폭}" height="{높이}"></object>

실행 결과는 위에서 첨부한 캡처 화면과 동일하다.

대체 콘텐츠 삽입하기

대체 콘텐츠를 삽입하는 것은 어렵지 않다. object 태그 내부에 적고 싶은 내용을 적으면 된다.

<object type="application/pdf" data="{PDF}" width="{폭}" height="{높이}">
    <p>대체 콘텐츠입니다. 브라우저가 PDF 삽입을 지원하지 않거나 PDF 파일을 찾을 수 없습니다. <a href="{PDF}">직접 다운로드 해보기</a></p>
</object>

호환성을 고려하여 같은 내용을 한번 더 적기

만일 대체 콘텐츠를 보이기 원치 않고 반드시 PDF가 삽입된 결과를 얻고자 하면 object 태그 안에 embed 태그로 같은 내용을 한 번 더 적어주면 된다. object 태그를 지원하지 않는 브라우저는 그 안에 담긴 embed 태그를 읽어서 PDF를 표시해 줄 것이다. 다만 HTML5의 기준에서 어차피 둘 다 표준이기 때문에 이렇게 적는 것이 그리 큰 의미가 있을지는 의문이다.

<object type="application/pdf" data="{PDF}" width="{폭}" height="{높이}">
    <embed type="application/pdf" src="{PDF}" width="{폭}" height="{높이}" />
</object>

툴바(toolbar) 가리기

위의 방법은 기본적으로 PDF 상단에 툴바가 나타난다.

툴바를 없애려면 URI 끝에 toolbar=0 매개변수를 넣어주면 된다. embed, object 구분 없이 동일하며 다음 파일을 참고하면 여러가지 옵션들을 지정할 수 있다.

pdf_open_parameters.pdf

0.13MB

원본 위치: Parameters for Opening PDF Files

<object type="application/pdf" data="http://foo/bar.pdf#toolbar=0" width="{폭}" height="{높이}">
    <embed type="application/pdf" src="http://foo/bar.pdf#toolbar=0" width="{폭}" height="{높이}" />
</object>

여러 개의 옵션을 지정할 때는 &으로 결합하면 된다. 예를 들어 툴바를 없애고 페이지별 미리보기도 없애려면 toolbar=0&navpane=0과 같은 식으로 이을 수 있다.

단, 이 방법은 Firefox에서는 효과가 없는 듯하다...

Base64 Data URI로 PDF 파일 지정하기

pdf 파일을 base64로 인코드(encode)하면 HTML 자체에 PDF 파일을 통째로 넣을 수 있다. 이 때의 주소는 data:application/pdf;base64,<내용>과 같이 지정한다.

단, Data URI에는 # 이후로 매개변수를 붙이는 표준이 없기 때문에 툴바를 없앤다거나 하는 옵션 지정은 불가하다.

<object type="application/pdf" data="data:application/pdf;base64,..." width="{폭}" height="{높이}">
    <embed type="application/pdf" src="data:application/pdf;base64,..." width="{폭}" height="{높이}" />
</object>

저작자표시 비영리 변경금지

[HTML5] HTML 내부에 PDF 파일 삽입하기