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

Peer reviewed by Jani Hartikainen, Florian Rappl, Jezen Thomas, and Jeff Smith. Thanks to SitePoint's peer reviewers for their contributions!

Most modern browsers natively support PDF viewing, but this functionality is beyond a developer's direct control. Imagine needing to customize a web app's PDF display – disabling the print button, or restricting page access based on user subscriptions. While the <embed></embed> tag utilizes the browser's native renderer, it lacks the programmatic control for such customizations.

Enter PDF.js, a powerful library from Mozilla Labs. It renders PDFs within the browser, giving developers complete control over the rendering process.

Key Features of PDF.js:

• Full Control: Bypass browser limitations and customize PDF rendering.
• HTML5-Based: Works in modern browsers without plugins.
• Rendering Options: Supports Canvas and SVG for flexible implementation.
• Asynchronous Loading: Uses promises for efficient handling of large files.
• Advanced Features: Enables text-layer rendering, custom zoom, and more.

Understanding PDF.js

PDF.js, built on HTML5, eliminates the need for third-party plugins. Its use extends to various online file-sharing services (Dropbox, CloudUp, Jumpshare, etc.) for seamless online PDF viewing. While incredibly useful, integrating PDF.js can be challenging due to limited documentation on advanced features like text layers, annotations, and password-protected files.

This article explores PDF.js integration, covering:

• Basic Integration
• SVG Rendering
• Text-Layer Rendering
• Zooming

Basic Integration

1. Downloading Necessary Files:

PDF.js is a JavaScript library. You'll need pdf.js and pdf.worker.js. While Node.js and Gulp are options for downloading, a simpler approach is using these direct URLs (always providing the latest version):

• https://mozilla.github.io/pdf.js/build/pdf.js
• https://mozilla.github.io/pdf.js/build/pdf.worker.js

2. Web Workers and PDF.js:

PDF parsing and rendering are computationally intensive. PDF.js leverages HTML5 Web Workers to offload these tasks to a separate thread, preventing browser lockups. This is the default behavior, but can be disabled if needed.

3. Promises in PDF.js:

The PDF.js API utilizes promises for clean asynchronous operation handling.

4. A Simple Example:

Let's render a simple "Hello World!" PDF (available at http://mozilla.github.io/pdf.js/examples/learning/helloworld.pdf). Ensure your files are served via a local web server (e.g., http://localhost/pdfjs_learning/index.html).

Include pdf.js in your index.html:

<code class="language-html"></code>

You can optionally specify the pdf.worker.js path if it's not in the same directory:

<code class="language-javascript">PDFJS.workerSrc = "/path/to/pdf.worker.js";</code>

Now, add the following JavaScript to render the PDF:

<code class="language-javascript">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);
  });</code>

And add a <canvas></canvas> element to your index.html:

<code class="language-html"><canvas id="the-canvas"></canvas></code>

This code fetches, parses, and renders the PDF onto the canvas. PDFJS.getDocument() initiates the asynchronous download; pdf.getPage() retrieves a specific page; page.render() performs the rendering.

Rendering Using SVG

PDF.js also supports SVG rendering. Modify the page.render() section to use SVG:

<code class="language-javascript">page.getOperatorList()
  .then(function(opList) {
    var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs);
    return svgGfx.getSVG(opList, viewport);
  })
  .then(function(svg) {
    container.appendChild(svg);
  });</code>

Replace the <canvas></canvas> with a <div id="the-svg"></div> in your HTML.

Rendering Text Layers

To enable text selection, download text_layer_builder.js<code>text_layer_builder.js and text_layer_builder.css<code>text_layer_builder.css and include them in your HTML. Use a more complex PDF (e.g., http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf<code>http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf). The following code renders multiple pages and adds text layers:

<code class="language-html"></code>

Zooming

Adjust the scale<code>scale variable to control zoom level.

Conclusion

PDF.js provides a powerful and flexible way to integrate custom PDF rendering into web applications. Its clean API and asynchronous handling make it a valuable tool for developers. Experiment with the code and explore its advanced features!

Frequently Asked Questions (FAQs) (Concisely summarized)

• Purpose of Custom Rendering: Provides a seamless user experience within the web application, eliminating the need for external PDF viewers.
• How PDF.js Works: Parses and renders PDFs using HTML5 and web standards.
• Implementation: Include the library, use the API to load and render on a canvas.
• Customization: Manipulate the canvas and use CSS to style.
• Limitations: May struggle with complex PDFs, performance depends on file size and device.
• Performance Improvement: Optimize PDF files, use lazy loading.
• Compatibility: Works well with other JavaScript libraries.
• Licensing: Open-source (Apache License 2.0).
• Contribution: Welcome to contribute to the project.
• Support: Consult the official documentation and GitHub community.

The above is the detailed content of Custom PDF Rendering in JavaScript with Mozilla's PDF.Js. For more information, please follow other related articles on the PHP Chinese website!