[javascript] Universal Viewer를 통한 PDF 파일 열기와 관련된 기능

30 Nov 2023

javascript

Web 개발에서 PDF 파일을 표시하고 조작하는 기능은 매우 중요합니다. 이전에는 플러그인이나 라이브러리를 사용하여 이를 구현했지만, 최근에는 Universal Viewer라는 도구를 사용하여 PDF 파일을 열고 표시하는 것이 더 편리해졌습니다.

Universal Viewer는 다양한 파일 형식을 표시할 수 있는 범용 뷰어입니다. 특히 PDF 파일에 대해서는 강력한 기능을 제공하고 있습니다. 아래는 Universal Viewer를 사용하여 PDF 파일을 열고 관련된 기능을 구현하는 방법입니다.

Universal Viewer 설치하기

먼저 Universal Viewer를 설치해야 합니다. 다운로드 링크는 여기에서 제공됩니다. 다운로드 후, 압축을 해제하고 원하는 경로에 Universal Viewer 폴더를 위치시킵니다.
HTML 파일에 Universal Viewer 추가하기

다음으로, 웹 페이지에 Universal Viewer를 추가해야 합니다. HTML 파일의 head 태그 내에 다음과 같이 코드를 추가합니다.
```
<link rel="stylesheet" href="/path/to/universalviewer.css" type="text/css" />
<script src="/path/to/universalviewer.js"></script>
```
위 코드에서 /path/to/를 Universal Viewer 폴더가 위치한 경로로 변경해야 합니다.
PDF 파일 열기

Universal Viewer를 사용하여 PDF 파일을 열기 위해서는 OpenSeadragon 라이브러리를 먼저 로드해야 합니다. 로드하기 위해 다음 코드를 head 태그 내에 추가합니다.
```
<script src="/path/to/openseadragon.js"></script>
```
이제 PDF 파일을 열기 위한 기능을 추가할 준비가 되었습니다. 아래 코드를 body 태그 내에 추가합니다.
```
<div id="universalviewer" style="width: 800px; height: 600px;"></div>
<script>
  var viewer = new UV.Viewer({
    id: "universalviewer",
    iiifResourceUri: "/path/to/pdf/file/info.json",
  });
</script>
```
위 코드에서 /path/to/pdf/file/info.json을 열고자 하는 PDF 파일의 정보가 담긴 파일의 경로로 변경해야 합니다.
기능 추가하기

Universal Viewer에는 다양한 기능을 추가할 수 있습니다. 예를 들어, 특정 페이지로 이동하거나 확대/축소 기능을 추가할 수 있습니다.
```
<button onclick="viewer.goToPage(2)">Go to page 2</button>
<button onclick="viewer.zoomIn()">Zoom In</button>
<button onclick="viewer.zoomOut()">Zoom Out</button>
```
위 코드는 페이지 이동 및 확대/축소 버튼을 추가한 예시입니다. 버튼을 누르면 해당 기능이 동작하도록 할 수 있습니다.

이제 Universal Viewer를 사용하여 PDF 파일을 열고 관련된 기능을 구현할 수 있습니다. Universal Viewer는 사용하기 쉽고 강력한 도구이며, 다양한 사용자 정의 옵션을 제공합니다. 자세한 내용은 Universal Viewer 공식 문서를 참조하시기 바랍니다.

Universal Viewer 공식 사이트: https://universalviewer.io/
Universal Viewer GitHub 레포지토리: https://github.com/universalviewer/universalviewer