PDFJS 사용해보기

프로젝트를 진행하며 PDF 파일을 화면에 일부 띄우는 작업을 진행해야 했다. 라이브러리를 사용하지 않고 띄우는 것도 가능하지만 조금의 커스터마이징을 하기 위해서 pdfjs 를 사용해보았다. 우선 아래 링크에서 필요한 파일들을 다운로드 받아준다.

 

링크: https://mozilla.github.io/pdf.js/

PDF.js

 

 

 

우선 다운받은 폴더를 src 폴더 내에 넣는다. pdfjs 는 다운로드 받은 폴더 내 web 폴더 안에 있는 viewer.html 을 iframe 태그로 가져와서 사용하게 되는 것이다. (해당 viewer.html 에 pdf 를 불러오는 것) 사용 방법은 간단하다. 아래와 같이 viewer.html 의 경로와 pdf 파일이 있는 경로를 iframe 의 src 에 넣어주면 된다.

 

 

 

<iframe src="/pdfjs/web/viewer.html?file=/file/test.pdf" id="viewer"></iframe>

 

 

 

하지만 실제로 사용할 때 iframe 태그 내에 파일의 경로를 직접 적어주는 것보다는 해당 파일의 다운로드 링크를 만들어준 뒤 이를 pdf 파일 경로로 사용하는 것이 더 바람직하다고 한다. 우선 다운로드를 받기 위한 링크를 아래와 같이 컨트롤러에 만들어주었다.

 

 

 

    @GetMapping(path = "/download/{id}")
    public void fileDownload(@PathVariable(name = "id") Integer fileId, HttpServletResponse response) {
        
        // 파일정보불러오기
        FileInfo fileInfo = fileService.getFileInfo(fileId);
        String fileName = fileInfo.getFileName(); // 파일이름
        String tempfileName = fileInfo.getSaveFileName(); // 파일경로
        StringBuilder sb = new StringBuilder("c:/tmp/");
        sb.append(tempfileName);
        String saveFileName = sb.toString();
        
        String contentType = fileInfo.getContentType();
        File file = new File(saveFileName);
        long fileLength = file.length();
        response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\";");
        response.setHeader("Content-Transfer-Encoding", "binary"); 
        response.setHeader("Content-Type", contentType);
        response.setHeader("Content-Length", "" + fileLength);
        response.setHeader("Pragma", "no-cache;");
        response.setHeader("Expires", "-1;");
        
        try (FileInputStream fis = new FileInputStream(saveFileName); OutputStream out = response.getOutputStream();) {  
            int readCount = 0;
            byte[] buffer = new byte[1024];
            while ((readCount = fis.read(buffer)) != -1) {
                out.write(buffer, 0, readCount);
            }
        } catch (Exception ex) {
            throw new RuntimeException("file Load Error");
        }
    }

 

 

 

파일 다운로드 관련 코드는 아래 링크에서 가져왔다.

 

링크: https://takeknowledge.tistory.com/62

스프링에서 파일다운로드 구현하는 방법

 

 

 

 

그럼 이제 이를 활용하여 다시 iframe 태그를 작성해보자면 아래와 같은 것이다.

 

 

 

<iframe src="/pdfjs/web/viewer.html?file=/download/id1" id="viewer"></iframe>

 

 

 

이처럼 몇 가지 간단한 세팅만으로 pdfjs 를 사용해볼 수 있다.