^(코딩캣)^ = @"코딩"하는 고양이;
썸네일 이미지
[HTML5] HTML 내부에 PDF 파일 삽입하기
HTML 내부에 PDF 파일 삽입하기 html 문서에서 pdf 파일을 '링크(link)'하지 않고 '삽입(embed)'하는 방법에 대해 정리한다. embed 태그를 이용한 방법 embed 태그에 MIME type과 URI를 지정하면 HTML 내부에 pdf 파일이 삽입된다. 구 버전 HTML에서는 embed 태그에 pluginpage라는 속성(attribute)이 있어서 PC에 적절한 플러그인이 설치되어 있지 않은 경우 해당 플러그인을 설치할 수 있는 페이지로 연결시킬 수 있었지만 HTML5에서는 이 속성이 폐지(deprecated)되었다. 즉, 사용하면 안 된다. object 태그를 이용한 방법 그러나 stackoverflow에 따르면 embed보다는 object를 쓸 것을 권장하고 있다. embed 태..
Common Gateway Interface/HTML
2021. 2. 14. 15:10

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

Common Gateway Interface/HTML
2021. 2. 14. 15:10

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="{높이}" />

Chrome에서 열어 본 결과
Microsoft Edge에서 열어 본 결과
Firefox에서 열어 본 결과

 

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>

 

Chrome에서 열어 본 결과
Microsoft Edge에서 열어 본 결과
Firefox에서 열어 본 결과

 

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

만일 대체 콘텐츠를 보이기 원치 않고 반드시 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 상단에 툴바가 나타난다.

Chrome에서 열어 본 결과
Microsoft Edge에서 열어 본 결과
Firefox에서 열어 본 결과

 

툴바를 없애려면 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에서는 효과가 없는 듯하다...

 

Chrome에서 열어 본 결과
Microsoft Edge에서 열어 본 결과
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>

 

“Common Gateway Interface/HTML” (1건)