syidaxdesign system
홈 가격 내 정보
ComponentsData display

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>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-pdf-viewer>

Properties

Attribute / PropertyTypeDefaultDescription
string''PDF 파일 URL입니다.
string'document.pdf'Download filename and accessible label. Spec name: `file-name`.
number1현재 페이지 번호입니다. 1부터 시작합니다.
number100확대 비율(%)입니다. 25~400으로 제한합니다.
string'640px'높이입니다. CSS 길이 또는 px로 해석되는 숫자 문자열입니다.
booleantrueShow the toolbar above the viewer. Spec name: `show-toolbar`.
booleantrueExpose the download action.
booleantrueExpose the print action.
booleantrueExpose the fullscreen toggle.
string'PDF preview is not available in this browser.'Fallback message shown when the browser cannot render the PDF natively. Spec name: `fallback-text`.
string'No PDF selected'Empty-state text when `src` is not provided. Spec name: `empty-text`.

Events

EventDetailDescription
CustomEvent<{ src: string }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<{ src: string }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<{ page: number }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<{ zoom: number }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<{ active: boolean }>이벤트의 detail에서 결과를 확인하세요.

Methods

MethodReturnsDescription
Promise<void>PDF의 페이지를 변경합니다. 1 이상으로 제한합니다.
Promise<void>PDF 확대 비율을 25~400% 안에서 변경합니다.
Promise<void>현재 PDF를 다시 불러옵니다.
Promise<void>PDF를 새 창으로 열어 인쇄합니다.
Promise<void>Request native fullscreen on the viewer host.
Promise<void>창을 원래 크기로 복원합니다.
Promise<void>Toggle between fullscreen and restored.

Slots

SlotDescription
empty 영역에 표시할 내용입니다.
Design SystemTab 이동 Enter 열기