Mozilla ' s pdf.js와 함께 JavaScript의 사용자 정의 PDF 렌더링

Jani Hartikainen, Florian Rappl, Jezen Thomas 및 Jeff Smith가 검토 한 동료. 그들의 기여에 대한 Sitepoint의 동료 검토 자 덕분에! 대부분의 최신 브라우저는 기본적으로 PDF 시청을 지원하지만이 기능은 개발자의 직접적인 제어를 넘어선 것입니다. 인쇄 버튼을 비활성화하거나 사용자 구독을 기반으로 페이지 액세스를 제한하는 웹 앱의 PDF 디스플레이를 사용자 정의해야한다고 상상해보십시오. 태그는 브라우저의 기본 렌더러를 사용하지만 그러한 사용자 정의에 대한 프로그래밍 방식이 부족합니다. Mozilla Labs의 강력한 라이브러리 인 Pdf.js를 입력하십시오. 브라우저 내에서 PDF를 렌더링하여 개발자가 렌더링 프로세스를 완전히 제어 할 수 있도록합니다. pdf.js의 주요 특징 : :

전체 제어 : 바이 패스 브라우저 제한 및 PDF 렌더링을 사용자 정의합니다 html5 기반 : 플러그인이없는 최신 브라우저에서 작동합니다 렌더링 옵션 :

는 유연한 구현을 위해 캔버스 및 SVG를 지원합니다 비동기로드 :

큰 파일의 효율적인 처리를 위해 약속을 사용합니다. 고급 기능 : <embed></embed> 텍스트 레이어 렌더링, 사용자 정의 줌 등을 활성화합니다

pdf.js 이해

HTML5를 기반으로 한 <..> pdf.js는 타사 플러그인이 필요하지 않습니다. 사용은 완벽한 온라인 PDF 시청을 위해 다양한 온라인 파일 공유 서비스 (Dropbox, Cloudup, Jumpshare 등)로 확장됩니다. 엄청나게 유용하지만 PDF.JS를 통합하는 것은 텍스트 레이어, 주석 및 암호로 보호 된 파일과 같은 고급 기능에 대한 제한된 문서로 인해 어려울 수 있습니다. 이 기사에서는 pdf.js 통합을 탐색합니다 기본 통합 svg 렌더링 텍스트 레이어 렌더링 확대 / 축소 기본 통합

1. 필요한 파일 다운로드 :

pdf.js는 JavaScript 라이브러리입니다. 와
• 가 필요합니다. Node.js와 Gulp는 다운로드 옵션이지만 더 간단한 접근 방식은 이러한 직접 URL을 사용하는 것입니다 (항상 최신 버전 제공) :
2. 웹 작업자 및 pdf.js :
• PDF 구문 분석 및 렌더링은 계산 집중적입니다. pdf.js는 HTML5 웹 워커를 활용하여 이러한 작업을 별도의 스레드에 오프로드하여 브라우저 잠금을 방지합니다. 이것은 기본 동작이지만 필요한 경우 비활성화 할 수 있습니다. 3. pdf.js의 약속 :
PDF.JS API는 깨끗한 비동기 조작 처리에 대한 약속을 사용합니다.
• 4. 간단한 예 : 간단한 "Hello World!" pdf (에서 사용 가능). 로컬 웹 서버를 통해 파일이 제공되는지 확인하십시오 (예 : ).

  http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf : 에 포함시킵니다 http://localhost/pdfjs_learning/index.html 동일한 디렉토리에 있지 않은 경우

  경로를 선택적으로 지정할 수 있습니다.

  이제 다음 JavaScript를 추가하여 pdf를 렌더링합니다 : pdf.js 그리고 index.html : 에

  요소를 추가하십시오

  <🎜>

  이 코드는 PDF를 캔버스로 가져오고 구문 분석하고 렌더링합니다. 는 비동기 다운로드를 시작합니다. 특정 페이지를 검색합니다. 렌더링을 수행합니다 <🎜 🎜> <<> svg를 사용한 렌더링 pdf.js는 SVG 렌더링도 지원합니다. svg를 사용하려면

  섹션을 수정하십시오 pdf.worker.js

  <🎜

  PDFJS.workerSrc = "/path/to/pdf.worker.js";

  를 a
  <🎜 🎜>로 바꾸십시오당신의 html에서 <<> 텍스트 계층
  <🎜 🎜> 렌더링 텍스트 선택을 활성화하려면 text_layer_builder.js <p> 및 <code> text_layer_builder.css <🎜 <🎜 <🎜 <strong>를 다운로드하고 HTML에 포함시킵니다. 보다 복잡한 pdf (예 : <code> http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf <🎜 <🎜 </strong>)를 사용하십시오. 다음 코드는 여러 페이지를 렌더링하고 텍스트 레이어를 추가합니다. </p> <🎜 🎜> <<> 확대 / 축소 <p> <code>text_layer_builder.js <코드> ​​스케일 <🎜 🎜> 변수를 조정하여 줌 레벨을 제어합니다 <🎜 🎜> <<> 결론 <code>text_layer_builder.css http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf pdf.js는 사용자 정의 PDF 렌더링을 웹 애플리케이션에 통합하는 강력하고 유연한 방법을 제공합니다. 깨끗한 API 및 비동기식 처리는 개발자에게 귀중한 도구입니다. 코드를 실험하고 고급 기능을 탐색하십시오!
  <🎜 🎜> <<> 자주 묻는 질문 (faqs) <🎜

  <🎜>

  (간결하게 요약)

  사용자 정의 렌더링 목적 : 는 웹 응용 프로그램 내에서 원활한 사용자 경험을 제공하여 외부 PDF 뷰어의 필요성을 제거합니다. PDF.JS의 작동 방식 :

  html5 및 웹 표준을 사용하여 PDF를 구문 분석하고 렌더링합니다. 구현 :

  라이브러리 포함, API를 사용하여 캔버스에로드하고 렌더링하십시오. 사용자 정의 : scale 캔버스를 조작하고 스타일에 CSS를 사용하십시오 제한 사항 :

  복잡한 PDF로 어려움을 겪을 수 있으며, 성능은 파일 크기와 장치에 따라 다릅니다. 성능 개선 :

  PDF 파일 최적화, 게으른로드를 사용하십시오 호환성 : 다른 JavaScript 라이브러리와 잘 작동합니다 라이센스 : 오픈 소스 (Apache License 2.0).

  기여 :

  프로젝트에 기여하는 것을 환영합니다.

  지원 :

  공식 문서 및 Github 커뮤니티를 참조하십시오

위 내용은 Mozilla ' s pdf.js와 함께 JavaScript의 사용자 정의 PDF 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!