목표
PDF.js와 Express 활용하여 웹 기반 PDF 뷰어 서비스를 구축한다.
PDF.js ?
웹 브라우저에서 PDF 문서를 표시하고 렌더링하기 위한 오픈 소스 JavaScript 라이브러리이다. 이 라이브러리는 Mozilla Foundation에서 개발되었으며, 웹 페이지에서 PDF 문서를 자연스럽게 표시하고 상호작용할 수 있는 기능을 제공한다.
준비 사항
- node
- pdf.js (Prebuilt 버전 다운로드)
pdf.js 다운로드
pdf.js site에서 Prebuilt (modern browsers) 를 다운로드 한다.
파일 구조는 아래와 같다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
├── build/
│ ├── pdf.js - display layer
│ ├── pdf.js.map - display layer's source map
│ ├── pdf.worker.js - core layer
│ └── pdf.worker.js.map - core layer's source map
├── web/
│ ├── cmaps/ - character maps (required by core)
│ ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│ ├── debugger.js - helpful debugging features
│ ├── images/ - images for the viewer and annotation icons
│ ├── locale/ - translation files
│ ├── viewer.css - viewer style sheet
│ ├── viewer.html - viewer layout
│ ├── viewer.js - viewer layer
│ └── viewer.js.map - viewer layer's source map
└── LICENSE
프로젝트 환경 구축
pdfviewer 프로젝트 폴더를 생성하고 프로젝트를 초기화한다. :
1
2
3
$ mkdir pdfviewer
$ cd pdfviewer
$ npm init
express를 설치한다. :
1
npm install express
Express ?
Node.js 기반의 웹 애플리케이션 프레임워크로, 웹 서버를 쉽게 구축하고 관리할 수 있게 도와준다.
index.js 파일을 생성하고 기본 어플리케이션을 설정한다 :
1
2
3
4
5
6
7
8
9
const express = require('express');
const app = express();
const port = 3000; // 사용할 포트 번호
app.use(express.static('public'));
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
public 폴더를 생성하고 앞서 다운받은 pdf.js 소스를 복사해준다.
1
2
3
4
├── public/
│ ├── build - pdf.js source
│ ├── web - pdf.js source
├── index.js
프로젝트 실행
서버를 실행한다 :
1
$ node index.js
웹 사이트에 접속해 본다 :
1
http://localhost:3000/web/viewer.html
Default로 설정된 파일이 잘 로딩되는 모습을 볼 수 있다. 
개인 파일을 로딩할때는 public/web 폴더 아래 test.pdf를 복사하고 아래와 같이 실행하면 된다 :
1
http://localhost:3000/web/viewer.html?file=test.pdf