오픈 소스 JavaScript PDF 뷰어 라이브러리
이 무료 및 오픈 소스 JavaScript API를 PDF 파서, 뷰어, 리더 및 렌더러 라이브러리로 사용해 보세요.
PDF.js란 무엇입니까?
PDF.js는 브라우저에서 PDF(Portable Document Format) 문서를 볼 수 있도록 Mozilla에서 개발한 오픈 소스 JavaScript 및 HTML5 기반 PDF 뷰어 라이브러리입니다.
PDF.js는 아래 나열된 여러 기능을 지원합니다.
- PDF 렌더링: 웹 브라우저에서 PDF 문서를 열고 보고 읽거나 렌더링할 수 있습니다.
- PDF 인쇄/저장: PDF.js를 사용하면 즐겨 사용하는 웹 브라우저에서 PDF 문서를 인쇄하거나 저장할 수도 있습니다.
- 프레젠테이션 모드: 프리젠테이션 모드를 사용하면 PDF 페이지를 전체 화면으로 표시하고 프리젠테이션 슬라이드처럼 각 페이지로 이동할 수 있습니다.
- PDF 탐색: PDF.js는 다음 또는 이전 페이지로 이동할 수 있는 보다 쉬운 탐색 컨트롤을 제공합니다. 페이지 번호를 입력하여 원하는 페이지로 빠르게 이동할 수도 있습니다.
- PDF 주석: PDF 페이지에 텍스트, 이미지 또는 그림을 추가하여 PDF 문서에 주석을 달 수도 있습니다.
- PDF 페이지 회전: PDF.js를 사용하면 PDF 페이지를 시계 방향이나 시계 반대 방향으로 회전할 수도 있습니다.
- PDF 스크롤: PDF.js는 페이지를 가로 또는 세로로 스크롤할 수 있는 멋진 컨트롤을 제공합니다.
- PDF 문서 속성: 마지막으로 PDF.js 뷰어를 사용하여 브라우저 내에서 PDF 문서의 속성을 볼 수도 있습니다.
PDF.js 시작하기
PDF.js를 다운로드하여 웹 프로젝트에서 사용하는 방법에는 세 가지가 있습니다.
1. 소스에서 빌드
GitHub에서 PDF.js 저장소를 복제하고 Node.js, gulp 아래 단계에 따라 PDF.js 종속성을 설정하세요.
로컬 시스템에서 PDF.js git 저장소를 복제하고 pdf.js 폴더로 전환합니다.
git clone https://github.com/mozilla/pdf.js.git
cd pdf.js
Node.js 설치
https://nodejs.org/en/download
전역적으로 gulp 패키지 설치
npm install -g gulp-cli
PDF.js 종속성 설치
npm install
gulp 서버를 실행하고 http://localhost:8888/web/viewer.html의 브라우저에서 뷰어를 엽니다.
gulp server
2. 사전 구축된 배포판을 사용하세요
PDF.js는 또한 GitHub의 PDF.js 릴리스에서 찾을 수 있는 소스 코드와 함께 사전 구축된 배포판을 제공합니다. . 사전 구축된 PDF.js 라이브러리를 다운로드하여 사용할 수 있습니다.
3. CDN을 통해 호스팅 라이브러리 사용
PDF.js는 무료 CDN 서버에서도 호스팅됩니다. 아래에는 몇 가지 링크가 공유되어 있습니다.
- https://cdnjs.com/libraries/pdf.js
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://unpkg.com/pdfjs-dist
PDF.js 뷰어 실행
GitHub에서 사전 구축된 배포 라이브러리를 다운로드하고 추출하면 build< 폴더 두 개를 찾을 수 있습니다. /strong> 및 웹. PDF.js 라이브러리 파일은 build 폴더에서 찾을 수 있습니다. 여기서 web 폴더에는 Viewer.html, Viewer.css, Viewer.js 및 관련 파일을 포함하는 뷰어 프로젝트가 포함되어 있습니다. Viewer.html 코드를 확인하면 빌드 폴더의 pdf.js 라이브러리와 기타 관련 CSS 및 js 파일도 참조하는 것을 볼 수 있습니다.
브라우저에서 Viewer.html을 실행하여 PDF.js 뷰어가 어떻게 보이는지 살펴보겠습니다.
PDF 문서 렌더링/보기
PDF.js 뷰어 라이브러리를 사용하여 브라우저에서 PDF 문서를 렌더링하거나 보려면 script 태그를 사용하여 PDF.js 라이브러리를 HTML 문서 헤더에 포함하고 캔버스를 HTML 본문에 추가한 다음 pdfjsLib을 사용하는 데 필요한 JavaScript 코드를 추가하고 객체가 PDF 문서의 비동기 로드 및 렌더링을 처리하도록 약속합니다.
위 코드는 아래와 같이 사용자 인터페이스나 컨트롤 없이 브라우저에서 PDF 문서를 로드합니다.
온라인 데모
모든 기능을 갖춘 온라인을 사용해 보세요. PDF.js 뷰어 데모를 통해 PDF.js 라이브러리의 모든 기능을 살펴보세요.
결론
PDF.js는 강력한 커뮤니티를 갖춘 무료 오픈 소스 JavaScrpit PDF 뷰어 라이브러리입니다. 최신 브라우저와 레거시 브라우저 모두에 대한 크로스 브라우저 지원을 제공합니다. 예, 레거시 브라우저의 사용자 경험은 최신 브라우저와 동일하지 않을 수 있지만 무료 라이브러리로는 여전히 좋습니다. 안전하고 사용자 정의가 가능합니다. 기능은 제한되어 있지만 PDF 뷰어로서 훌륭하게 작동합니다.
PDF.js는 웹 기반 PDF 뷰어를 구축하기 위한 멋진 API와 아키텍처를 제공합니다. 개발자의 시간을 절약하기 위해 뷰어에 더 많은 UI 컨트롤을 추가하는 데 시간이 걸리기 때문에 PDF.js는 찾을 수 있는 완전한 기능과 풍부한 기능을 갖춘 PDF 뷰어의 소스 코드도 제공합니다(viewer.html, Viewer.js 및 Viewer.css 등) PDF.js 라이브러리 배포 패키지의 web 폴더에 있습니다.