使用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中文网其他相关文章！