← 예제 목록

PDF 미리보기

<file-uploader accept="application/pdf">

PDF 파일의 썸네일 생성 및 페이지 네비게이션 기능입니다.

PDF 썸네일 미리보기

PDF 파일을 업로드하면 첫 페이지가 썸네일로 표시됩니다.

PDF.js 라이브러리를 사용하여 브라우저에서 PDF를 렌더링합니다.

주요 기능

  • 썸네일 자동 생성 - PDF 첫 페이지를 미리보기 이미지로 표시
  • 클릭하여 프리뷰 - 썸네일 클릭 시 전체 화면 미리보기
  • 페이지 네비게이션 - 좌우 화살표로 다중 페이지 탐색
  • 더블클릭 맞춤 - 이미지 더블클릭 시 화면에 맞춤

이미지 + PDF 복합

이미지와 PDF를 함께 업로드할 수 있습니다.

복합 타입

image/* application/pdf

프리뷰 모달 기능

이미지나 PDF 썸네일을 클릭하면 전체 화면 미리보기가 열립니다.

모달 조작 방법

조작 기능
마우스 휠 줌 인/아웃
드래그 확대된 이미지 이동
더블클릭 화면 맞춤/원본 크기 전환
좌/우 화살표 PDF 페이지 이동
ESC / X 버튼 모달 닫기

List 뷰에서 PDF

리스트 뷰 모드에서의 PDF 표시입니다.

view-mode="list"

리스트 형식으로 파일을 표시합니다.