반응형
HTML로 PDF를 표시하고 싶다
HTML상에서 PDF 파일을 표시하고 싶다고 할 때가 있을 것입니다.
PDF는 여러가지 문서 정보를 정리할 수 있는 데다가, 타사이트의 PDF 를 채울 수도 있기 때문에 사용하고 싶은 사람도 많을 것입니다.
HTML 페이지로 PDF 를 표시하는 방법은 여러 개 있어, 어느 수단을 취해도 PDF 를 표시할 수 있습니다.
그러니까, 자신이 마음에 드는 방법으로 PDF 표시를 시험해 보세요.
HTML로 PDF를 표시하는 방법 5선
그럼 조속히 HTML 로 PDF 를 표시하는 방법을 소개해 가겠습니다.
PDF 를 표시하는 방법은 크게 나누어 이하의 5 개입니다.
iframe을 사용하는
embed를 사용하다
object 태그 사용하기
PDF.js를 쓰는
jQuery로 PDF 파일의 링크를 변환하다
iframe 태그를 사용하는
가장 쉬운 방법이 iframe 태그를 사용하는 것입니다.
iframe 에서 PDF 를 표시하는 경우는 아래와 같이 기술합니다.
결과
1
2
< iframe src = ′ https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf ′
이것으로 PDF 파일이 읽혀집니다.
폭과 높이를 지정하지 않는 경우, PDF가 전혀 표시되지 않는 상태가 되어 버리는 일이 있기 때문에 주의합시다.
퍼센트 표기로 지정할 수도 있지만, 높이를 퍼센트 표기로 지정한 경우는 높은 확률로 사이즈 지정이 잘 되지 않기 때문에 기억해 두십시오.
꼭 화면 크기 등에서 최적의 폭과 높이를 지정하고 싶다면 아래의 CSS를 적용을 해 주세요.
1
2
3
4
5
6
< style >
iframe [ src $ = ′ . pdf ′ ] {
width : 100 % ;
height : 80vh ;
}
< / style >
vh라고 하는 단위를 전혀 보지 못한 분들이 많을 것으로 생각하는데, 이는 뷰포트(브라우저에서 보여 주고 있는 영역)의 크기에 대한 비율을 나타내고 있습니다.
브라우저 보기 영역의 높이가 1000px이고 80vh를 지정한 경우 800px가 되며 브라우저를 확대 축소하면 자동으로 조정됩니다.
WEB 개발에 있어 매우 편리하기 때문에, 기억해 두면 좋을 것입니다.
embed 태그를 사용하다
embed는 HTML5에서 정식으로 도입된 컨텐츠 채우기용 태그입니다.
embed 태그를 사용하는 경우는 이하와 같이 기술합니다.
결과
1
2
< embed src = ′ https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf ′
embed는 기술이 굉장히 단순하기 때문에 iframe보다 더 보기 편하다고 하시는 분들이 계실 수 있습니다.
기술할 때 주의할 점으로
종료태그기술이필요없을것
읽을 수 없을 때의 대체 텍스트를 기술할 수 없음
종료태그 를 기술하면 문법 에러가 되므로 주의해 주세요.
그리고 iframe 과는 다르게 대체 텍스트 기술이 안되기 때문에 읽기에 실패했을 때는 읽기 에러 테두리만 표시되어 상당히 불편합니다.
그렇기 때문에 아마 가능한 한 iframe 태그로 대응하는 것이 좋을지도 모릅니다.
object 태그 사용하기
별로 아는 사람이 많지 않지만 object 태그를 통해서 PDF를 표시할 수도 있습니다.
결과
1
2
3
< object data = ′ https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf ′
< / object >
object 태그는 iframe이 등장하기 전부터 있었던 콘텐츠 채우기 태그로 PDF 채우기라면 iframe과 같은 동작을 합니다.
최신 콘텐츠 포함용 태그는 iframe이기 때문에 object를 사용하신다면 iframe을 사용하시는 것이 좋습니다.
PDF.js를 쓰는
깨끗하게 PDF 를 삽입하고 싶다면 PDF.js 를 사용하면 좋을지도 모릅니다.
삽입 설정을 가늘게 정의할 수 있어 풀스크린시는 별도 탭으로 여는 등의 설정을 할 수 있습니다.거기에 더해 스마트 폰에서도 제대로 표시 할 수 있습니다.
PDF . js
결과
1
< iframe width = ′ 400 ′ height = ′ 300 ′ src = ′ http : // localhost / pdfjs - 1 . 4 . 20 - dist / web / viewer . html ? file = https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf ′
보통 외부 scipt 파일을 사용할 때는 HTML페이지에 넣어서 사용하는데 PDF.js는 다릅니다.
PDF.js 가 준비하고 있는 viewer.html 에 대해서 PDF 파일의 URL 를 건네주는 것으로 표시할 수 있습니다.
조금 독특한 사용법이므로 익숙해질 때까지 힘들지도 모릅니다만, 사용하는 경우는 여러 번 시험해 보면 좋을 것입니다.
PDF.js는 아래 페이지에서 다운로드 하시기 바랍니다.
PDF . js - Getting Started
덧붙여서 이 방법은 AMP페이지에서는 사용할 수 없기 때문에 AMP대응을 하고 있는 경우에는 사용하지 않도록 합시다.AMP페이지에서 PDF를 채우고 싶다면 iframe을 추천합니다.
jQuery에서 PDF 파일의 URL을 변환하다
jQuery를 사용하시면 PDF 파일로 URL을 자동으로 iframe으로 변환해서 PDF를 표현을 하실 수도 있습니다.
모든 PDF 파일에 앵커링크를 iframen으로 변환하고 싶다면 jQuery를 불러와 아래 코드를 붙여넣으시기 바랍니다.
결과
1
2
3
4
5
6
7
8
9
< script >
jQuery ( function ( ) {
$ ( ′ body a ′ ) . filter ( ′ [ href * = ′ . pdf ′ ]′ ) . each ( function ( ) {
var this _ file _ url = $ ( this ) . attr ( ′ href ′ ) ;
$ ( this ) . before ( ′ < object class = ′ pdf _ js _ view ′ width = ′ 100 % ′ height = ′ 700px ′ data = ′ ′
});
});
< / script >
여기는 자바스크립트 지식이 필요한데다가 AMP페이지에서는 동작하지 않기 때문에 주의를 하도록 하겠습니다.
단지 PDF를 담고 싶을 뿐이라면 직접 iframe을 기술하는 것이 가장 좋습니다.
HTML상에서 PDF 파일을 표시하고 싶다고 할 때가 있을 것입니다.
PDF는 여러가지 문서 정보를 정리할 수 있는 데다가, 타사이트의 PDF 를 채울 수도 있기 때문에 사용하고 싶은 사람도 많을 것입니다.
HTML 페이지로 PDF 를 표시하는 방법은 여러 개 있어, 어느 수단을 취해도 PDF 를 표시할 수 있습니다.
그러니까, 자신이 마음에 드는 방법으로 PDF 표시를 시험해 보세요.
HTML로 PDF를 표시하는 방법 5선
그럼 조속히 HTML 로 PDF 를 표시하는 방법을 소개해 가겠습니다.
PDF 를 표시하는 방법은 크게 나누어 이하의 5 개입니다.
iframe을 사용하는
embed를 사용하다
object 태그 사용하기
PDF.js를 쓰는
jQuery로 PDF 파일의 링크를 변환하다
iframe 태그를 사용하는
가장 쉬운 방법이 iframe 태그를 사용하는 것입니다.
iframe 에서 PDF 를 표시하는 경우는 아래와 같이 기술합니다.
결과
1
2
< iframe src = ′ https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf ′
이것으로 PDF 파일이 읽혀집니다.
폭과 높이를 지정하지 않는 경우, PDF가 전혀 표시되지 않는 상태가 되어 버리는 일이 있기 때문에 주의합시다.
퍼센트 표기로 지정할 수도 있지만, 높이를 퍼센트 표기로 지정한 경우는 높은 확률로 사이즈 지정이 잘 되지 않기 때문에 기억해 두십시오.
꼭 화면 크기 등에서 최적의 폭과 높이를 지정하고 싶다면 아래의 CSS를 적용을 해 주세요.
1
2
3
4
5
6
< style >
iframe [ src $ = ′ . pdf ′ ] {
width : 100 % ;
height : 80vh ;
}
< / style >
vh라고 하는 단위를 전혀 보지 못한 분들이 많을 것으로 생각하는데, 이는 뷰포트(브라우저에서 보여 주고 있는 영역)의 크기에 대한 비율을 나타내고 있습니다.
브라우저 보기 영역의 높이가 1000px이고 80vh를 지정한 경우 800px가 되며 브라우저를 확대 축소하면 자동으로 조정됩니다.
WEB 개발에 있어 매우 편리하기 때문에, 기억해 두면 좋을 것입니다.
embed 태그를 사용하다
embed는 HTML5에서 정식으로 도입된 컨텐츠 채우기용 태그입니다.
embed 태그를 사용하는 경우는 이하와 같이 기술합니다.
결과
1
2
< embed src = ′ https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf ′
embed는 기술이 굉장히 단순하기 때문에 iframe보다 더 보기 편하다고 하시는 분들이 계실 수 있습니다.
기술할 때 주의할 점으로
종료태그기술이필요없을것
읽을 수 없을 때의 대체 텍스트를 기술할 수 없음
종료태그 를 기술하면 문법 에러가 되므로 주의해 주세요.
그리고 iframe 과는 다르게 대체 텍스트 기술이 안되기 때문에 읽기에 실패했을 때는 읽기 에러 테두리만 표시되어 상당히 불편합니다.
그렇기 때문에 아마 가능한 한 iframe 태그로 대응하는 것이 좋을지도 모릅니다.
object 태그 사용하기
별로 아는 사람이 많지 않지만 object 태그를 통해서 PDF를 표시할 수도 있습니다.
결과
1
2
3
< object data = ′ https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf ′
< / object >
object 태그는 iframe이 등장하기 전부터 있었던 콘텐츠 채우기 태그로 PDF 채우기라면 iframe과 같은 동작을 합니다.
최신 콘텐츠 포함용 태그는 iframe이기 때문에 object를 사용하신다면 iframe을 사용하시는 것이 좋습니다.
PDF.js를 쓰는
깨끗하게 PDF 를 삽입하고 싶다면 PDF.js 를 사용하면 좋을지도 모릅니다.
삽입 설정을 가늘게 정의할 수 있어 풀스크린시는 별도 탭으로 여는 등의 설정을 할 수 있습니다.거기에 더해 스마트 폰에서도 제대로 표시 할 수 있습니다.
PDF . js
결과
1
< iframe width = ′ 400 ′ height = ′ 300 ′ src = ′ http : // localhost / pdfjs - 1 . 4 . 20 - dist / web / viewer . html ? file = https://s3-ap-northeast-1.amazonaws.com/cdn.aprico-media.com/resources/sample.pdf ′
보통 외부 scipt 파일을 사용할 때는 HTML페이지에 넣어서 사용하는데 PDF.js는 다릅니다.
PDF.js 가 준비하고 있는 viewer.html 에 대해서 PDF 파일의 URL 를 건네주는 것으로 표시할 수 있습니다.
조금 독특한 사용법이므로 익숙해질 때까지 힘들지도 모릅니다만, 사용하는 경우는 여러 번 시험해 보면 좋을 것입니다.
PDF.js는 아래 페이지에서 다운로드 하시기 바랍니다.
PDF . js - Getting Started
덧붙여서 이 방법은 AMP페이지에서는 사용할 수 없기 때문에 AMP대응을 하고 있는 경우에는 사용하지 않도록 합시다.AMP페이지에서 PDF를 채우고 싶다면 iframe을 추천합니다.
jQuery에서 PDF 파일의 URL을 변환하다
jQuery를 사용하시면 PDF 파일로 URL을 자동으로 iframe으로 변환해서 PDF를 표현을 하실 수도 있습니다.
모든 PDF 파일에 앵커링크를 iframen으로 변환하고 싶다면 jQuery를 불러와 아래 코드를 붙여넣으시기 바랍니다.
결과
1
2
3
4
5
6
7
8
9
< script >
jQuery ( function ( ) {
$ ( ′ body a ′ ) . filter ( ′ [ href * = ′ . pdf ′ ]′ ) . each ( function ( ) {
var this _ file _ url = $ ( this ) . attr ( ′ href ′ ) ;
$ ( this ) . before ( ′ < object class = ′ pdf _ js _ view ′ width = ′ 100 % ′ height = ′ 700px ′ data = ′ ′
});
});
< / script >
여기는 자바스크립트 지식이 필요한데다가 AMP페이지에서는 동작하지 않기 때문에 주의를 하도록 하겠습니다.
단지 PDF를 담고 싶을 뿐이라면 직접 iframe을 기술하는 것이 가장 좋습니다.
반응형