일부 웹 사이트는 PDF 파일의 다운로드 링크를 제공하지 않고 해당 사이트의 웹 페이지에 직접 pdf 파일을 표시하는 경향이 있습니다. HTML5 덕분에 타사 솔루션을 사용하지 않고도 간단한 HTML 코드로 동일한 작업을 수행 할 수도 있습니다. 우리가 보게 될 방법은 pdf 파일이 사용자에게 어떻게 표시되는지 제어 할 수있는 빠르고 쉬운 방법입니다. 또한 HTML5를 지원하는 모든 최신 웹 브라우저에서 작동합니다.
HTML 페이지에 PDF 파일을 포함시키는 방법
HTML5는 <embed>이미지, 비디오, mp3 파일 또는 기타 멀티미디어 객체와 같은 외부 응용 프로그램의 컨테이너 역할을하는 요소를 제공 합니다. 이 태그를 사용하면 브라우저가 멀티미디어 객체에 대한 컨트롤을 자동으로 포함시킵니다 (브라우저가 특정 미디어 유형을 지원하는 경우).
이 <embed>태그를 사용하여 복잡한 타사 스크립트를 사용하지 않고 웹 페이지에 pdf 파일을 표시합니다. 파일을 포함 할 html 페이지를 열고 pdf 파일을 표시 할 위치에 아래 마크 업을 포함하십시오.
<!DOCTYPE html>
<html>
<head>
<title>HTML 페이지에 PDF 파일을 포함시키는 방법</title>
</head>
<body>
<h1>HTML 페이지에 PDF 파일을 포함시키는 방법</h1>
<embed src="sample.pdf" type="application/pdf" width="100%" height="600px" />
</body>
</html>
이제 웹 페이지에서 PDF 문서보기를 제어하는 방법을 보여 드리겠습니다. URL에 매개 변수를 사용하면 표시 할 내용과 PDF 문서를 표시하는 방법을 정확하게 지정할 수 있습니다.
다음 매개 변수는 일반적으로 PDF 파일을 HTML로 삽입하거나 브라우저에서 열 때 사용됩니다.
-
page = pagenum - 문서의 페이지 번호 (정수)를 지정합니다. 문서의 첫 번째 페이지에는 1이라는 값이 있습니다.
-
zoom = scale - 부동 소수점 또는 정수 값을 사용하여 확대 / 축소 및 스크롤 계수를 설정합니다. 예를 들어 눈금 값 100은 100 %의 줌 값을 나타냅니다.
-
view = Fit - 표시된 페이지의보기를 설정합니다.
-
scrollbar = 1 | 0 - 스크롤바를 켜거나 끕니다.
-
toolbar = 1 | 0 - 도구 모음을 켜거나 끕니다.
-
statusbar = 1 | 0 - 상태 표시 줄을 켜거나 끕니다.
-
navpanes = 1 | 0 - 탐색 창과 탭을 켜거나 끕니다.
URL에 매개 변수 지정
URL에 여러 매개 변수를 지정할 수 있습니다. 각 매개 변수는 Z 퍼 w 드 (&) 또는 파운드 (#) 문자로 구분해야합니다. 액션은 왼쪽에서 오른쪽으로 실행되고 이후 액션은 이전 액션보다 우선 적용됩니다.
매개 변수가있는 URL은 다음과 같습니다.
http://example.com/doc.pdf#Chapter5
http://example.com/doc.pdf#page=5
http://example.com/doc.pdf#page=3&zoom=200,250,100
http://example.com/doc.pdf#zoom=100
http://example.com/doc.pdf#page=72&view=fitH100'Web > Html' 카테고리의 다른 글
| 간편하게 이미지맵 생성한 후 반응형 적용하기 (0) | 2021.01.14 |
|---|