Aurelia의 모험 : 맞춤형 PDF 뷰어 만들기

이 기사는 Vildan Softic이 동료 검토했습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다!

웹 응용 프로그램에서 PDF 파일을 처리하는 것은 항상 매우 까다 롭습니다. 운이 좋으면 사용자는 파일을 다운로드하면됩니다. 그러나 때로는 사용자에게는 더 많은 기능이 필요합니다. 과거에는 운이 좋았지 만 이번에는 사용자가 각 페이지와 관련된 메타 데이터를 저장할 수 있도록 PDF 문서를 표시하기 위해 앱이 필요합니다. 이전에는 사람들이 비싼 PDF 플러그인 (예 : Adobe Reader)을 사용하여 브라우저에서 실행하여이를 달성했을 수 있습니다. 그러나 시간과 실험 후에는 웹 애플리케이션에서 PDF 뷰어를 통합하는 더 좋은 방법을 찾았습니다. 오늘, 우리는 Aurelia 및 PDF.JS를 사용하여 PDF 처리를 단순화하는 방법을 배울 것입니다.

코어 포인트

aurelia 및 pdf.js를 사용하여 스케일링 및 스크롤과 같은 기능을 갖춘 사용자 정의의 효율적인 PDF 뷰어를 작성하여 사용자 상호 작용 및 성능을 향상시킵니다. Aurelia의 현재 페이지 및 줌 레벨과 같은 속성에 대해 양방향 데이터 바인딩을 구현하여 응용 프로그램의 원활한 통합 및 동적 업데이트가 가능합니다. PDF 뷰어를 재사용 가능한 Aurelia 사용자 정의 요소로 개발하여 충돌없이 여러 뷰어를 애플리케이션에 추가 할 수 있습니다.

PDF.JS를 사용하여 PDF 렌더링을 처리하고 비동기 작업 및 웹 작업자를 지원하여 처리를 제거하고 UI 응답 속도를 향상시킵니다.

가상 스크롤 및 기타 최적화를 고려하여 특히 큰 문서를 효과적으로 처리함으로써 잠재적 성능 문제를 해결합니다.
• 다른 프로젝트 및 응용 프로그램에 쉽게 통합 할 수 있도록 사용자 정의 PDF 뷰어를 Aurelia 플러그인으로 변환 할 수있는 가능성을 살펴 봅니다.
• 개요 : 목표
오늘날 우리의 목표는 Aurelia에서 PDF 뷰어 구성 요소를 구축하여 뷰어와 응용 프로그램 사이에 양방향 데이터 흐름을 허용하는 것입니다. 우리는 세 가지 주요 요구 사항이 있습니다 :
우리는 사용자가 문서를로드하고 성능이 우수하게 스크롤하고 확대/축소 할 수 있기를 원합니다.
• 우리는 뷰어 속성 (예 : 현재 페이지 및 현재 줌 레벨)을 응용 프로그램의 속성에 양방향으로 바인딩 할 수 있기를 원합니다.
우리는이 시청자가 재사용 가능한 구성 요소가되기를 원합니다.
GitHub 저장소 에서이 자습서의 코드와 완성 된 코드의 데모를 여기에서 찾을 수 있습니다.
소개 pdf.js는 Mozilla Foundation이 작성한 JavaScript 라이브러리입니다. PDF 문서, 파일 파일 및 관련 메타 데이터를로드하고 페이지 출력을 DOM 노드 (일반적으로 요소)로 렌더링합니다. 프로젝트에 포함 된 기본 뷰어는 Chrome 및 Firefox의 임베디드 PDF 뷰어를 지원하며 독립형 페이지 또는 리소스 (IFRAMES에 포함)로 사용할 수 있습니다.

이것은 정말 멋지다. 여기서 문제는 기본 뷰어가 많은 기능을 가지고 있지만 독립형 웹 페이지로 설계되었다는 것입니다. 즉, 웹 응용 프로그램에 통합 될 수 있지만 기본적으로 iframe 샌드 박스 내부에서 실행해야합니다. 기본 뷰어는 쿼리 문자열을 통해 구성 입력을 얻도록 설계되었지만 초기로드 후 구성을 쉽게 변경할 수 없으며 뷰어로부터 정보와 이벤트를 쉽게 얻을 수 없습니다. 이벤트 처리 및 양방향 바인딩을 포함한 Aurelia 웹 응용 프로그램과 통합하려면 Aurelia 사용자 정의 구성 요소를 만들어야합니다.

참고 : pdf.js에 대한 리뷰가 필요한 경우, 튜토리얼 : Mozilla의 pdf.js 를 사용하여 JavaScript의 Custom PDF 렌더링을 확인하십시오. 구현 우리의 목표를 달성하기 위해 Aurelia 사용자 정의 요소를 만들 것입니다. 그러나 기본 뷰어를 구성 요소에 넣지 않습니다. 대신, 우리는 PDF.JS Core 및 Viewer 라이브러리에 연결하여 바인딩 가능한 속성 및 렌더링의 제어를 최대화 할 수있는 자체 뷰어를 만들 것입니다. 우리의 초기 개념 증명을 위해, 우리는 Aurelia skeleton 응용 프로그램으로 시작합니다. 포토 스코프 코드 위의 링크에서 볼 수 있듯이 Skeleton 응용 프로그램에는 많은 파일이 있으며 그 중 많은 파일이 필요하지 않습니다. 작업을 단순화하기 위해 간소화 된 스켈레톤 버전을 준비하고 일부 내용을 추가했습니다.

PDF 파일을 Dist Folder에 복사하기위한 GULP 작업 (Aurelia는 번들링에 사용됩니다). <..> pdf.js 종속성이 package.json에 추가되었습니다. Application Root Directory에서 index.html 및 index.css는 초기 스타일 설정을 거쳤습니다.

우리가 사용할 파일의 빈 사본이 추가되었습니다.

파일 src/resources/elements/pdf-document.css에는 사용자 정의 요소에 대한 CSS 스타일이 포함되어 있습니다.

그래서 응용 프로그램을 시작하고 실행합시다. 먼저, Gulp와 JSPM이 전 세계적으로 설치되어 있는지 확인하십시오 :

그런 다음 골격을 복제하고 입력하십시오

그런 다음 필요한 종속성을 설치하십시오

마지막으로 Gulp Watch를 실행하고 http : // localhost : 9000으로 이동합니다. 모든 것이 계획에 따라 진행되면 환영 메시지가 표시됩니다.

더 많은 설정
• 다음으로해야 할 일은 몇 개의 PDF 파일을 찾아 SRC/문서에 넣는 것입니다. 그들에게 하나의 이름을 말하고 pdf와 2.pdf. 맞춤 구성 요소의 테스트를 극대화하기 위해 Gutenberg 프로젝트에서 찾을 수있는 전쟁 및 평화와 같이 PDF 파일 중 하나가 매우 길다는 것이 가장 좋습니다.

PDF 파일을 제자리에 놓은 후 Src/App.html 및 Src/App.js를 엽니 다 (합의 된 바와 같이, 앱 구성 요소는 Aurelia 응용 프로그램의 루트 구성 요소입니다), 코드를이 두 파일로 바꾸십시오. 코드 : src/app.html 및 src/app.js. 이 튜토리얼에서는 이러한 파일에 대해 논의하지 않지만 코드에는 좋은 의견이 있습니다.

• Gulp는 이러한 변경 사항을 자동으로 감지하며 응용 프로그램 UI 렌더링이 표시됩니다. 그것이 설정입니다. 이제 보여주기 시작합니다 ...

  Aurelia Custom Element 생성 우리는 Aurelia보기에 직접 사용할 수있는 구성 요소를 만들고자합니다. Aurelia View는 HTML5 템플릿 태그에 포함 된 HTML 스 니펫이므로 예는 다음과 같습니다.

  태그는 사용자 정의 요소의 예입니다. IT 및 그 속성 (스케일 및 페이지 등)은 HTML의 기본 속성이 아니지만 Aurelia 사용자 정의 요소를 사용하여이를 만들 수 있습니다. 사용자 정의 요소는 Aurelia의 기본 빌딩 블록 (보기 및 뷰 모델)을 사용하여 쉽게 만들 수 있습니다. 따라서 다음과 같이 PDF-Document.js라는 ViewModel을 먼저 구축합니다.

  여기에 주목할 주요 내용은

  <code class="language-bash">npm install -g gulp jspm</code>

  데코레이터입니다. 우리는 사용자 정의 요소에 배치하는 관련 속성에. 이를 통해 요소의 속성을 변경하여 PDF 뷰어를 제어 할 수 있습니다.

  그런 다음 뷰 모델과 쌍을 이루는 초기보기를 만듭니다. <pdf-document></pdf-document>

  <code class="language-bash">git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
  cd aurelia-pdfjs</code>

  (다음 내용은 기본적으로 원본 텍스트와 일치하지만 일부 문장은 유창성과 가독성을 유지하고 중복을 피하기 위해 자세히 조정되었습니다.)

  통합 된 pdf.js @bindable defaultBindingMode: bindingMode.twoWay API 표시 PDFJS라는 라이브러리 개체를 내보내므로 일부 구성 변수를 설정하고 pdfjs.getDocument (URL)를 사용하여 문서를로드 할 수 있습니다. API는 완전히 비동기식입니다. 웹 작업자에게 메시지를 보내고 받으므로 JavaScript 약속에 크게 의존합니다. 우리는 주로 pdfjs.getDocument () 메소드에서 pdfdocumentproxy 객체를 비동기로 반환하고 pdfdocumentproxy.getPage ()에서 pdfpageproxy 객체를 비동기로 반환합니다.

  문서는 약간 드문 일이지만 pdf.js에는 여기 및 여기에 기본 뷰어를 만드는 몇 가지 예가 있습니다. 이를 기반으로 사용자 정의 구성 요소를 구축 할 것입니다.

  <code class="language-bash">npm install
  jspm install -y</code>

  웹 작업자 통합 pdf.js는 웹 워커를 사용하여 렌더링 작업을 제거합니다. 웹 작업자가 브라우저 환경에서 실행하는 방식 (실제로 샌드 박스)에서, 우리는 일반적인 모듈 로더 대신 JavaScript 파일에 직접 파일 경로를 사용하여 웹 워커를로드해야합니다. 다행스럽게도 Aurelia는 로더 추상화를 제공하므로 정적 파일 경로를 참조 할 필요가 없습니다 (응용 프로그램을 번들 때 변경할 수 있음).

  저장소 버전의 저장소를 팔로우하는 경우 PDFJS-Dist 패키지를 설치했을 수 있습니다. 그렇지 않으면 지금이 작업을 수행해야합니다 (예 : JSPM JSPM 설치 NPM : PDFJS-Dist@^1.5.391). . 그런 다음 Aurelia의 종속성 주입 모듈을 사용하여 Aurelia의 로더 추상화를 주입하고 로더를 사용하여 다음과 같이 생성자에 웹 워커 파일을로드합니다. 로딩 페이지

  pdf.js 라이브러리는 PDF 문서의 로딩, 구문 분석 및 표시를 처리합니다. 부분 다운로드 및 인증을 지원합니다. 우리가해야 할 일은 관련 문서의 URI를 제공하는 것입니다.

  PDF의 로딩 및 표시는 바인딩 가능한 속성에 의해 구동됩니다. 기본적으로 URL이 변경되면 사용자 정의 요소는 pdf.js에게 파일에 요청을 발행하도록 요청해야합니다. 우리는 UrlChanged Handler 에서이 작업을 수행하고 생성자를 변경하여 일부 속성과 분리 된 방법을 정리하기 위해 일부 변경 사항을 초기화합니다.

  문서의 각 페이지마다 고정 된 높이의 스크롤 가능한 컨테이너에 위치한 DOM에 요소를 생성합니다. 이를 위해 리피터를 사용하여 Aurelia의 기본 템플릿 기능을 사용합니다. 각 PDF 페이지는 자체 크기와 방향을 가질 수 있으므로 PDF 페이지 뷰포트에 따라 각 캔버스 요소의 너비와 높이를 설정합니다. 렌더링 페이지

  이제 우리는 페이지를로드 했으므로 페이지를 DOM 요소로 렌더링 할 수 있어야합니다. 이를 위해, 우리는 pdf.js의 렌더링 기능에 의존 할 것입니다. pdf.js 뷰어 라이브러리에는 렌더링 페이지에 전용 된 비동기 API가 있습니다. 예제 에서이 코드를 추출하고 렌더링 함수로 래핑합니다. 스크롤 구현

  친숙하고 원활한 경험을 제공하기 위해, 우리의 구성 요소는 페이지를 완전히 스크롤 가능한 문서의 일부로 표시해야합니다. 우리는 컨테이너에 스크롤 오버플로가있는 고정 높이를 갖도록하여 CSS를 통해 달성 할 수 있습니다.

  큰 문서의 성능을 극대화하기 위해 다음 작업을 수행합니다. 먼저, 우리는 Aurelia의 Taskqueue를 사용하여 DOM을 배치합니다. 둘째, PDF.JS가 렌더링 한 페이지를 추적하여 수행 한 작업을 다시 할 필요가 없습니다. 마지막으로, 우리는 Aurelia의 분광 결합 거동을 사용하여 스크롤이 중지 된 후에 만 ​​표시되는 페이지를 렌더링합니다. 스크롤 할 때 실행되는 방법은 다음과 같습니다

  스케일링을 달성

  스케일을 할 때 현재 줌 레벨을 업데이트하려고합니다. Scalechanged Property Handler 에서이 작업을 수행 할 것입니다. 기본적으로 모든 캔버스 요소를 크기를 조정하여 주어진 스케일의 각 페이지에 대한 새로운 뷰포트 크기를 반영합니다. 그런 다음 현재 뷰포트에 표시된 내용을 다시 렌더링하고 루프를 다시 시작합니다.

  최종 결과

  우리의 목표를 검토합시다 : 우리는 사용자가 문서를로드하고 성능이 우수하게 스크롤하고 확대/축소 할 수 있기를 원합니다. 우리는 뷰어 속성 (예 : 현재 페이지 및 현재 줌 레벨)을 응용 프로그램의 속성에 양방향으로 바인딩 할 수 있기를 원합니다.

  우리는이 시청자가 재사용 가능한 구성 요소가되기를 원합니다.
  최종 코드는 GitHub 저장소에서 찾을 수 있으며 여기에서 완성 된 코드의 데모에서 찾을 수 있습니다. 여전히 개선의 여지가 있지만 우리는 목표에 도달했습니다!
  1. (다음 내용은 기본적으로 원본 텍스트와 일치하지만 일부 문장은 유창성과 가독성을 유지하고 중복을 피하기 위해 자세히 조정되었습니다.) 프로젝트 후 분석 및 개선
  항상 개선의 여지가 있습니다. 예정식 후 분석을 수행하고 미래의 반복에서 해결 해야하는 영역을 결정하는 것은 항상 좋은 습관입니다. PDF 뷰어 구현에서 업그레이드하려는 몇 가지 사항은 다음과 같습니다.
  2. 플러그인을 만듭니다
  Aurelia는 플러그인 시스템을 제공합니다. 이 개념 증명 증명을 Aurelia 플러그인으로 변환하면 Aurelia 응용 프로그램에 대한 사용이없는 리소스가됩니다. Aurelia Github 저장소는 좋은 출발점이 될 플러그인 골격 프로젝트를 제공합니다. 이런 식으로 다른 사람들은이 기능을 재건하지 않고 사용할 수 있습니다!
  3. 최적
  웹 응용 프로그램에서 PDF 파일을 처리하는 것은 항상 매우 까다 롭습니다. 그러나 오늘날 사용 가능한 리소스를 사용하면 라이브러리와 기능을 결합하여 그 어느 때보 다 많은 것을 달성 할 수 있습니다. 오늘날 우리는 기본 PDF 뷰어의 예를 보았습니다. 뷰어는 사용자 정의 기능으로 확장 할 수 있습니다. 가능성은 끝이 없습니다! 무언가를 만들 준비가 되셨습니까? 아래 의견에 알려주십시오.

  Aurelia Custom PDF 뷰어 구성 요소에 대한 FAQS (FAQS)

  (다음 내용은 기본적으로 원본 텍스트와 일치하지만 일부 문장은 유창성과 가독성을 유지하고 중복을 피하기 위해 자세히 조정되었습니다.)

위 내용은 Aurelia의 모험 : 맞춤형 PDF 뷰어 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!