本文經(jīng)Vildan Softic同行評(píng)審。感謝所有SitePoint的同行評(píng)審員，讓SitePoint的內(nèi)容達(dá)到最佳狀態(tài)！

在Web應(yīng)用程序中處理PDF文件一直以來都非常棘手。如果幸運(yùn)的話，你的用戶只需要下載文件即可。但有時(shí)，用戶需要更多功能。過去，我比較幸運(yùn)，但這次，我們的用戶需要應(yīng)用程序顯示PDF文檔，以便他們可以保存與每個(gè)頁面相關(guān)的元數(shù)據(jù)。以前，人們可能使用昂貴的PDF插件（例如Adobe Reader）在瀏覽器中運(yùn)行來實(shí)現(xiàn)此目的。然而，經(jīng)過一番時(shí)間和實(shí)驗(yàn)，我找到了一種更好的方法來在Web應(yīng)用程序中集成PDF查看器。今天，我們將了解如何使用Aurelia和PDF.js簡化PDF處理。

核心要點(diǎn)

• 利用Aurelia和PDF.js創(chuàng)建一個(gè)自定義的、高效的PDF查看器，具有縮放和滾動(dòng)等功能，增強(qiáng)用戶交互和性能。
• 在Aurelia中實(shí)現(xiàn)當(dāng)前頁面和縮放級(jí)別等屬性的雙向數(shù)據(jù)綁定，允許在應(yīng)用程序中無縫集成和動(dòng)態(tài)更新。
• 將PDF查看器開發(fā)成可重用的Aurelia自定義元素，可以在應(yīng)用程序中添加多個(gè)查看器而不會(huì)發(fā)生衝突。
• 利用PDF.js處理PDF渲染，支持異步操作和Web Worker，以卸載處理並提高UI響應(yīng)速度。
• 通過考慮虛擬滾動(dòng)和其他優(yōu)化來解決潛在的性能問題，尤其是在有效處理大型文檔方面。
• 探索將自定義PDF查看器轉(zhuǎn)換為Aurelia插件的可能性，使其易於集成到其他項(xiàng)目和應(yīng)用程序中。

概述：目標(biāo)

我們今天的目標(biāo)是在Aurelia中構(gòu)建一個(gè)PDF查看器組件，允許查看器和我們的應(yīng)用程序之間進(jìn)行雙向數(shù)據(jù)流。我們有三個(gè)主要要求：

1. 我們希望用戶能夠加載文檔、滾動(dòng)和放大/縮小，並具有良好的性能。
2. 我們希望能夠?qū)⒉榭雌鲗傩裕ɡ绠?dāng)前頁面和當(dāng)前縮放級(jí)別）與應(yīng)用程序中的屬性進(jìn)行雙向綁定。
3. 我們希望此查看器是一個(gè)可重用的組件；我們希望能夠輕鬆地在應(yīng)用程序中同時(shí)放置多個(gè)查看器，而不會(huì)發(fā)生衝突。

您可以在我們的GitHub倉庫中找到本教程的代碼，以及此處完成代碼的演示。

介紹PDF.js

PDF.js是一個(gè)由Mozilla基金會(huì)編寫的JavaScript庫。它加載PDF文檔，解析文件和相關(guān)的元數(shù)據(jù)，並將頁面輸出渲染到DOM節(jié)點(diǎn)（通常是<canvas></canvas>元素）。項(xiàng)目中包含的默認(rèn)查看器為Chrome和Firefox中的嵌入式PDF查看器提供支持，可以用作獨(dú)立頁面或資源（嵌入在iframe中）。

這確實(shí)很酷。這裡的問題是，默認(rèn)查看器雖然有很多功能，但它被設(shè)計(jì)為一個(gè)獨(dú)立的網(wǎng)頁。這意味著，雖然它可以集成到Web應(yīng)用程序中，但它基本上必須在iframe沙箱內(nèi)運(yùn)行。默認(rèn)查看器設(shè)計(jì)為通過其查詢字符串獲取配置輸入，但是我們不能在初始加載後輕鬆更改配置，也不能輕鬆地從查看器獲取信息和事件。為了將其與Aurelia Web應(yīng)用程序集成——包括事件處理和雙向綁定——我們需要?jiǎng)?chuàng)建一個(gè)Aurelia自定義組件。

注意：如果您需要關(guān)於PDF.js的複習(xí)，請(qǐng)查看我們的教程：使用Mozilla的PDF.js在JavaScript中進(jìn)行自定義PDF渲染

實(shí)現(xiàn)

為了實(shí)現(xiàn)我們的目標(biāo)，我們將創(chuàng)建一個(gè)Aurelia自定義元素。但是，我們不會(huì)將默認(rèn)查看器放入我們的組件中。相反，我們將創(chuàng)建自己的查看器，它連接到PDF.js核心和查看器庫，以便我們可以最大限度地控制我們的可綁定屬性和渲染。對(duì)於我們的初始概念驗(yàn)證，我們將從Aurelia骨架應(yīng)用程序開始。

樣板代碼

正如您從上面的鏈接中看到的那樣，骨架應(yīng)用程序有很多文件，其中許多文件我們不需要。為了簡化操作，我們準(zhǔn)備了一個(gè)精簡版本的骨架，並在其中添加了一些內(nèi)容：

• 一個(gè)Gulp任務(wù)，用於將我們的PDF文件複製到dist文件夾（Aurelia用於捆綁）。
• PDF.js依賴項(xiàng)已添加到package.json。
• 在應(yīng)用程序的根目錄中，index.html和index.css已經(jīng)進(jìn)行了一些初始樣式設(shè)置。
• 我們將要使用的文件的空副本已添加。
• 文件src/resources/elements/pdf-document.css包含自定義元素的一些CSS樣式。

所以讓我們啟動(dòng)並運(yùn)行應(yīng)用程序。

首先，確保全局安裝了gulp和jspm：

npm install -g gulp jspm

然後克隆骨架並進(jìn)入其中：

git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
cd aurelia-pdfjs

然後安裝必要的依賴項(xiàng)：

npm install
jspm install -y

最後運(yùn)行g(shù)ulp watch並導(dǎo)航到http://localhost:9000。如果一切按計(jì)劃進(jìn)行，您應(yīng)該會(huì)看到一條歡迎消息。

更多設(shè)置

接下來要做的是找到幾個(gè)PDF文件並將它們放在src/documents中。將它們命名為one.pdf和two.pdf。為了最大限度地測(cè)試我們的自定義組件，最好其中一個(gè)PDF文件非常長，例如可以在古騰堡計(jì)劃中找到的《戰(zhàn)爭與和平》。

將PDF文件放在適當(dāng)位置後，打開src/app.html和src/app.js（按照約定，App組件是Aurelia應(yīng)用程序的根組件），並將其中的代碼替換為這兩個(gè)文件的代碼：src/app.html和src/app.js。在本教程中，我們將不會(huì)討論這些文件，但代碼中有很好的註釋。

Gulp將自動(dòng)檢測(cè)這些更改，您應(yīng)該會(huì)看到我們的應(yīng)用程序UI呈現(xiàn)。設(shè)置就是這樣?，F(xiàn)在開始展示……

創(chuàng)建Aurelia自定義元素

我們希望創(chuàng)建一個(gè)可以直接用於任何Aurelia視圖的組件。由於Aurelia視圖只是一個(gè)包含在HTML5模板標(biāo)籤中的HTML片段，因此一個(gè)示例可能如下所示：

npm install -g gulp jspm

<pdf-document>標(biāo)籤是自定義元素的一個(gè)示例。它及其屬性（如scale和page）不是HTML的原生屬性，但我們可以使用Aurelia自定義元素來創(chuàng)建它。自定義元素易於創(chuàng)建，使用Aurelia的基本構(gòu)建塊：視圖和ViewModel。因此，我們將首先搭建我們的ViewModel，命名為pdf-document.js，如下所示：

git clone git@github.com:sitepoint-editors/aurelia-pdfjs.git -b skeleton
cd aurelia-pdfjs

這裡要注意的主要內(nèi)容是@bindable裝飾器；通過創(chuàng)建具有配置defaultBindingMode: bindingMode.twoWay的可綁定屬性，並通過在我們的ViewModel中創(chuàng)建處理程序方法（urlChanged、pageChanged等），我們可以監(jiān)控和響應(yīng)我們放置在自定義元素上的相關(guān)屬性的更改。這將允許我們簡單地通過更改元素上的屬性來控制我們的PDF查看器。

然後，我們將創(chuàng)建與我們的ViewModel配對(duì)的初始視圖。

npm install
jspm install -y

(以下內(nèi)容與原文基本一致，只是對(duì)部分語句進(jìn)行了細(xì)微的調(diào)整，以保持流暢性和可讀性，並避免重複。)

集成PDF.js

PDF.js分為三個(gè)部分：核心庫（處理PDF文檔的解析和解釋）、顯示庫（在核心層之上構(gòu)建可用的API）以及Web查看器插件（我們前面提到的預(yù)構(gòu)建網(wǎng)頁）。出於我們的目的，我們將通過顯示API使用核心庫；我們將構(gòu)建我們自己的查看器。

顯示API導(dǎo)出一個(gè)名為PDFJS的庫對(duì)象，它允許我們?cè)O(shè)置一些配置變量並使用PDFJS.getDocument(url)加載我們的文檔。該API是完全異步的——它向Web Worker發(fā)送和接收消息，因此它大量依賴於JavaScript Promise。我們將主要使用從PDFJS.getDocument()方法異步返回的PDFDocumentProxy對(duì)象和從PDFDocumentProxy.getPage()異步返回的PDFPageProxy對(duì)象。

儘管文檔有點(diǎn)稀疏，但PDF.js有一些創(chuàng)建基本查看器的示例，這里和這裡。我們將以此為基礎(chǔ)構(gòu)建我們的自定義組件。

Web Worker集成

PDF.js使用Web Worker來卸載其渲染任務(wù)。由於Web Worker在瀏覽器環(huán)境中的運(yùn)行方式（它們實(shí)際上是沙箱化的），我們被迫使用JavaScript文件的直接文件路徑來加載Web Worker，而不是通常的模塊加載器。幸運(yùn)的是，Aurelia提供了一個(gè)加載器抽象，因此我們不必引用靜態(tài)文件路徑（當(dāng)我們捆綁應(yīng)用程序時(shí)，這可能會(huì)發(fā)生變化）。

如果您正在關(guān)注我們版本的倉庫，您可能已經(jīng)安裝了pdfjs-dist包，否則，您現(xiàn)在需要這樣做（例如，使用jspm jspm install npm:pdfjs-dist@^1.5.391）。然後，我們將使用Aurelia的依賴注入模塊注入Aurelia的加載器抽象，並使用加載器在我們的構(gòu)造函數(shù)中加載Web Worker文件，如下所示：

加載頁面

PDF.js庫處理PDF文檔的加載、解析和顯示。它具有對(duì)部分下載和身份驗(yàn)證的內(nèi)置支持。我們所要做的就是提供相關(guān)文檔的URI，PDF.js將返回一個(gè)Promise對(duì)象，該對(duì)象解析為表示PDF文檔及其元數(shù)據(jù)的JavaScript對(duì)象。

PDF的加載和顯示將由我們的可綁定屬性驅(qū)動(dòng)；在這種情況下，它將是url屬性。基本上，當(dāng)URL更改時(shí)，自定義元素應(yīng)該要求PDF.js發(fā)出對(duì)文件的請(qǐng)求。我們將在urlChanged處理程序中執(zhí)行此操作，並對(duì)我們的構(gòu)造函數(shù)進(jìn)行一些更改以初始化一些屬性，並對(duì)我們的detached方法進(jìn)行一些更改以進(jìn)行清理。

對(duì)於文檔的每一頁，我們將在DOM中創(chuàng)建一個(gè)<canvas></canvas>元素，該元素位於具有固定高度的可滾動(dòng)容器內(nèi)。為此，我們將使用Aurelia的基本模板功能，使用一個(gè)repeater。因?yàn)槊總€(gè)PDF頁面都可以有自己的大小和方向，所以我們將根據(jù)PDF頁面視口設(shè)置每個(gè)canvas元素的寬度和高度。

渲染頁面

現(xiàn)在我們已經(jīng)加載了頁面，我們需要能夠?qū)⑺鼈冧秩镜紻OM元素。為此，我們將依賴於PDF.js的渲染功能。 PDF.js查看器庫有一個(gè)專門用於渲染頁面的異步API；他們的網(wǎng)站上有一個(gè)很好的示例，展示瞭如何創(chuàng)建一個(gè)renderContext對(duì)象並將其傳遞給PDF.js渲染方法。我們將這段代碼從示例中提取出來，並將其包裝在一個(gè)render函數(shù)中：

實(shí)現(xiàn)滾動(dòng)

為了提供熟悉且無縫的體驗(yàn)，我們的組件應(yīng)該將頁面顯示為完全可滾動(dòng)文檔的各個(gè)部分。我們可以通過使我們的容器具有具有滾動(dòng)溢出的固定高度來實(shí)現(xiàn)這一點(diǎn)，這可以通過CSS來實(shí)現(xiàn)。

為了最大限度地提高大型文檔的性能，我們將執(zhí)行以下幾件事。首先，我們將利用Aurelia的TaskQueue來批量更改DOM。其次，我們將跟蹤PDF.js已經(jīng)渲染的頁面，這樣它就不必重做它已經(jīng)完成的工作。最後，我們將只在滾動(dòng)停止後渲染可見頁面，方法是使用Aurelia的debounce綁定行為。這是我們?cè)跐L動(dòng)時(shí)將運(yùn)行的方法：

實(shí)現(xiàn)縮放

當(dāng)我們縮放時(shí)，我們希望更新當(dāng)前縮放級(jí)別。我們將在scaleChanged屬性處理程序中執(zhí)行此操作。基本上，我們將調(diào)整所有canvas元素的大小以反映給定比例的每一頁的新視口大小。然後，我們將重新渲染當(dāng)前視口中顯示的內(nèi)容，重新啟動(dòng)循環(huán)。

最終結(jié)果

讓我們回顧一下我們的目標(biāo)：

1. 我們希望用戶能夠加載文檔、滾動(dòng)和放大/縮小，並具有良好的性能。
2. 我們希望能夠?qū)⒉榭雌鲗傩裕ɡ绠?dāng)前頁面和當(dāng)前縮放級(jí)別）與應(yīng)用程序中的屬性進(jìn)行雙向綁定。
3. 我們希望此查看器是一個(gè)可重用的組件；我們希望能夠輕鬆地在應(yīng)用程序中同時(shí)放置多個(gè)查看器，而不會(huì)發(fā)生衝突。

最終代碼可以在我們的GitHub倉庫中找到，以及此處完成代碼的演示。雖然仍有改進(jìn)的空間，但我們已經(jīng)達(dá)到了目標(biāo)！

(以下內(nèi)容與原文基本一致，只是對(duì)部分語句進(jìn)行了細(xì)微的調(diào)整，以保持流暢性和可讀性，並避免重複。)

項(xiàng)目後分析和改進(jìn)

總有改進(jìn)的空間，進(jìn)行項(xiàng)目後分析並確定未來迭代中需要解決的領(lǐng)域始終是一個(gè)好習(xí)慣。以下是一些我想在PDF查看器實(shí)現(xiàn)方面進(jìn)行升級(jí)的內(nèi)容：

創(chuàng)建插件

Aurelia提供了一個(gè)插件系統(tǒng)。將這個(gè)概念驗(yàn)證轉(zhuǎn)換為Aurelia插件將使其成為任何Aurelia應(yīng)用程序的即用型資源。 Aurelia Github倉庫提供了一個(gè)插件骨架項(xiàng)目，這將是一個(gè)良好的起點(diǎn)。這樣，其他人就可以使用此功能，而無需重新構(gòu)建它！

展望

在Web應(yīng)用程序中處理PDF文件一直以來都非常棘手。但是，憑藉當(dāng)今可用的資源，我們可以通過組合庫及其功能來實(shí)現(xiàn)比以往更多的事情。今天，我們已經(jīng)看到一個(gè)基本PDF查看器的示例——一個(gè)可以通過自定義功能擴(kuò)展的查看器，因?yàn)槲覀兛梢酝耆刂扑??？赡苄允菬o限的！你準(zhǔn)備好構(gòu)建一些東西了嗎？請(qǐng)?jiān)谙旅娴脑u(píng)論中告訴我。

關(guān)於Aurelia自定義PDF查看器組件的常見問題解答（FAQ）

(以下內(nèi)容與原文基本一致，只是對(duì)部分語句進(jìn)行了細(xì)微的調(diào)整，以保持流暢性和可讀性，並避免重複。)

以上是Aurelia的冒險(xiǎn)：創(chuàng)建自定義PDF查看器的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！