使用Mozilla的JavaScript渲染自定義PDF

Jani Hartikainen，Florian Rappl，Jezen Thomas和Jeff Smith對同行進行了評論。 感謝SitePoint的同行評審！

>大多數現代瀏覽器本地瀏覽器都支持PDF查看，但是此功能超出了開發人員的直接控制。 想像一下，需要自定義Web應用程序的PDF顯示屏 - 禁用打印按鈕，或根據用戶訂閱限制頁面訪問。 雖然標籤使用瀏覽器的本機渲染器，但它缺乏此類自​​定義的程序控制控制。 > 輸入Mozilla Labs的強大庫PDF.JS。 它使PDF在瀏覽器中呈現，從而使開發人員完全控制了渲染過程。

PDF.JS的關鍵功能

<embed></embed>

完整控制：

旁路瀏覽器限制並自定義PDF渲染。 > 基於

• ：>在沒有插件的現代瀏覽器中工作。
• 渲染選項：支持帆布和SVG以進行靈活實現。
• 異步加載：>使用有效處理大型文件的承諾。
>
• 高級功能：啟用文本層渲染，自定義Zoom等。
• 了解pdf.js 建立在HTML5上的PDF.JS
> pdf.js消除了對第三方插件的需求。 它的使用擴展到各種在線文件共享服務（Dropbox，CloudUp，Jumpshare等），以進行無縫的在線PDF查看。 雖然非常有用，但是由於文本層，註釋和受密碼保護的文件等高級功能的文檔有限，因此集成pdf.js可能具有挑戰性。

本文探討了pdf.js集成，涵蓋：>

基本集成

> svg渲染

>文本層渲染

縮放

• 基本集成
• 1。下載必要的文件：

> pdf.js是一個JavaScript庫。 您將需要。 雖然node.js和Gulp是下載的選項，但一種更簡單的方法是使用這些直接URL（始終提供最新版本）：>

pdf.js pdf.worker.js

2。網絡工作者和pdf.js：
• https://mozilla.github.io/pdf.js/build/pdf.js PDF解析和渲染在計算上是密集的。 PDF.JS利用HTML5 Web工作人員將這些任務卸載到單獨的線程中，以防止瀏覽器鎖定。 這是默認行為，但可以在需要時被禁用。
• https://mozilla.github.io/pdf.js/build/pdf.worker.js 3。 pdf.js的承諾：

pdf.js api利用承諾用於乾淨的異步操作處理。

4。 一個簡單的示例：

>讓我們渲染一個簡單的“ Hello World！” pdf（http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf可用）。 確保通過本地Web服務器（例如，http://localhost/pdfjs_learning/index.html）提供文件。

>

在您的pdf.js中包括index.html：

>

<🎜>

>如果不在同一目錄中，則可以選擇指定pdf.worker.js路徑

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

現在，添加以下JavaScript以渲染PDF：>

並將

var url = "http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf";

PDFJS.getDocument(url)
  .then(function(pdf) {
    return pdf.getPage(1);
  })
  .then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    page.render(renderContext);
  });

元素添加到您的

>：<canvas></canvas>> index.html

此代碼獲取，解析並將PDF渲染到畫布上。

<canvas id="the-canvas"></canvas>

啟動異步下載；

>檢索特定頁面； PDFJS.getDocument()執行渲染。 pdf.getPage()> 使用SVG page.render()

>

>

> pdf.js還支持SVG渲染。修改

部分使用svg：page.render()

在在您的html中。 >

渲染文本層

要啟用文本選擇，下載 text_layer_builder.js <code>text_layer_builder.js和 text_layer_builder.css <code>text_layer_builder.css，並將它們包含在您的html中。 使用更複雜的PDF（例如 http://mozilla.github.io/pdf.js/web/compresse.tracemonkeykey-pldi-09.pdf<code>http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf）。 以下代碼呈現多個頁面並添加文本層：

<🎜>

縮放

調整比例<code>scale變量以控制Zoom Level。

結論 PDF.JS

> PDF.JS提供了一種強大而靈活的方法，將自定義PDF渲染集成到Web應用程序中。 它乾淨的API和異步處理使其成為開發人員的寶貴工具。 實驗代碼並探索其高級功能！

經常詢問問題（FAQS）（簡單地總結）>

自定義渲染的目的

>
• 在Web應用程序中提供了無縫的用戶體驗，從而消除了對外部PDF Viewers的需求。 PDF.JS的工作方式>
使用HTML5和Web標準。
• >實現：包括庫，使用API​​在畫布上加載和渲染。
• 自定義：操縱畫布並使用CSS進行樣式。
• >>限制：可能會在復雜的PDF上遇到困難，性能取決於文件大小和設備。 >
>
• 性能改進：優化PDF文件，使用懶惰加載。
• 兼容性：>與其他JavaScript庫效果很好。
• 許可：開放式源（Apache License 2.0）。 在
• 支持：請諮詢官方文檔和github社區。

以上是使用Mozilla的JavaScript渲染自定義PDF的詳細內容。更多資訊請關注PHP中文網其他相關文章！