Notice
Recent Posts
Recent Comments
Tags more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

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

javascript

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

http://portfolio.wonpaper.net 2020. 9. 19. 04:25

 

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

 

 

 

'javascript' 카테고리의 다른 글

[javascript] 남은 시간, 타이머  (0) 2020.12.03
[javascript] checkbox 전체선택, 전체해제, 선택한 checkbox 내용확인하기 1  (0) 2020.10.27
[javascript] 네이버지도 연동하기 ( Naver Map )  (0) 2020.09.11
[javascript] Button 클릭시 submit 되는 현상 막기  (0) 2020.08.05
[javascript] 로그인 유효성 체크하기 (onsubmit 과 onkeydown)  (0) 2020.07.20
'javascript' Related Articles more
Comments