JavaScript 활용팁
HOME > WEB > JavaScript 활용팁
2022.05.02 / 10:43

PDF 자동 로딩 - pdf.js 소스 연동하기 (모바일,pc 자동로딩)

코로나
추천 수 211

PDF 자동 로딩 - pdf.js 소스 연동하기 (모바일,pc 자동로딩)

 

pc상의 브라우저로 pdf 파일을 자동로딩을 할때,

<iframe src="test.pdf"></iframe> 형식으로 한다면,

크롬에서는 자동 로딩이 된다.

IE의 경우, 아크로벳 리더같은 플러그인형태로 설치가 되어 있어야 브라우저 상으로 자동로딩이 된다.

 

그런데, 문제는 모바일상으로 바로 PDF 파일을 로딩하고 싶을때이다.

 

이럴때 유용하게 쓸 수 있는 오픈소스가 pdf.js 이다.

 

mozilla.github.io/pdf.js/

 

PDF.js

PDF.js A general-purpose, web standards-based platform for parsing and rendering PDFs. Download Demo GitHub Project

mozilla.github.io

mozilla.github.io/pdf.js/getting_started/#download

 

Getting Started

Getting Started An introduction to PDF.js with examples. Introduction Before downloading PDF.js please take a moment to understand the different layers of the PDF.js project. Layer About Core The core layer is where a binary PDF is parsed and interpreted

mozilla.github.io

 

위의 다운로드 페이지에서 pdfjs-2.5.207-dist.zip 을 다운받았다.

압축을 풀면 

여기에서 web폴더안의 viewer.html 파일과 연동하면 간단히 사용할 수가 있다.

 

1
<iframe src="./web/viewer.html?file=2020_guidebook_1.pdf" width="100%" height="920px"></iframe>
cs