PDF Viewer

PRO

PDF 문서를 화면 안에서 확인하고 페이지·확대·다운로드를 제공합니다.

<sy-pdf-viewer>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

페이지확대 비율

도구 모음다운로드인쇄전체화면

코드 보기

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  page="1"
  zoom="100"
  show-toolbar
  downloadable
  printable
  fullscreenable
  id="sample"
></sy-pdf-viewer>

사용 가이드

페이지 안에서 PDF를 바로 확인하게 합니다. 브라우저의 내장 PDF 표시 기능을 사용합니다.

파일과 영역: src에 접근 가능한 PDF URL, fileName에 파일 이름을 지정하고 컨테이너 높이를 확보하세요. 아래 예제는 2페이지 문서를 사용합니다.
페이지와 확대: setPage()는 1 이상, setZoom()은 25–400 범위를 사용합니다.
문서 도구: 다운로드·인쇄·전체 화면 옵션을 용도에 맞게 설정하세요.

예제

PDF 문서

도구 모음과 함께 문서를 표시합니다.

코드 보기

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  id="sample"
></sy-pdf-viewer>

페이지와 확대 제어

앱의 동작에서 페이지·확대 메서드를 호출할 수 있습니다.

코드 보기

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  id="sample"
></sy-pdf-viewer>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">2페이지</sy-button>
  <sy-button id="action-1" size="small">125%</sy-button>
  <sy-button id="action-2" size="small">새로고침</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setPage(2);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setZoom(125);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.reload();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

문서 중심

도구 모음을 생략할 수 있습니다.

코드 보기

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  show-toolbar="false"
  id="sample"
></sy-pdf-viewer>

문서가 없을 때

src가 비어 있으면 안내를 표시합니다.

코드 보기

HTML

<sy-pdf-viewer
  src=""
  file-name="syidax-guide.pdf"
  height="380px"
  empty-text="확인할 PDF를 선택하세요."
  id="sample"
></sy-pdf-viewer>

전체화면

사용자가 버튼을 누르는 동작 안에서 호출하세요.

코드 보기

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  id="sample"
></sy-pdf-viewer>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">전체화면</sy-button>
  <sy-button id="action-1" size="small">원래 크기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setFullScreen();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setRestore();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  page="1"
  zoom="100"
  show-toolbar
  downloadable
  printable
  fullscreenable
  id="sample"
></sy-pdf-viewer>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["loaded", "failed", "pageChanged", "zoomChanged", "fullscreenChanged"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

파일이 없을 때 안내

empty 슬롯은 아직 문서를 선택하지 않은 상태의 안내 영역입니다. src를 지정하면 문서가 표시됩니다.

코드 보기

HTML

<sy-pdf-viewer height="280px">
  <div slot="empty"><strong>문서를 선택해 주세요.</strong>
    <p>PDF 파일을 연결하면 이 위치에서 확인할 수 있습니다.</p>
  </div>
</sy-pdf-viewer>

읽기용 도구 모음

페이지와 확대·축소 기능은 유지하고 다운로드와 인쇄 버튼을 숨깁니다.

코드 보기

HTML

<sy-pdf-viewer
  src="/assets/examples/guide.pdf"
  file-name="syidax-guide.pdf"
  height="380px"
  page="1"
  zoom="100"
  show-toolbar
  downloadable="false"
  printable="false"
  fullscreenable
  id="sample"
></sy-pdf-viewer>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "downloadable": false,
    "printable": false
  });
</script>

기능별 예제

24개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.