使用Mozilla的JavaScript渲染自定义PDF-js教程-PHP中文网

Custom PDF Rendering in JavaScript with Mozilla's PDF.Js

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集成，涵盖：>

基本集成

> svg渲染

>文本层渲染

缩放

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

> pdf.js是一个JavaScript库。您将需要。虽然node.js和Gulp是下载的选项，但一种更简单的方法是使用这些直接URL（始终提供最新版本）：>

pdf.js pdf.worker.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>> 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）。以下代码呈现多个页面并添加文本层：