Convert Figma logo to code with AI

mozilla logopdf.js

PDF Reader in JavaScript

47,890
9,912
47,890
411

Top Related Projects

PdfParser, a standalone PHP library, provides various tools to extract data from a PDF file.

10,446

HTML to PDF converter for PHP

A DOMPDF Wrapper for Laravel

iText for Java represents the next level of SDKs for developers that want to take advantage of the benefits PDF can bring. Equipped with a better document engine, high and low-level programming capabilities and the ability to create, edit and enhance PDF documents, iText can be a boon to nearly every workflow.

Quick Overview

PDF.js is an open-source PDF viewer built with HTML5. It's a powerful library that allows developers to render PDF documents directly in web browsers without the need for plugins. PDF.js is widely used, including as the default PDF viewer in Mozilla Firefox.

Pros

  • Cross-platform compatibility: Works on any device with a modern web browser
  • No plugins required: Renders PDFs using pure HTML5 and JavaScript
  • Customizable: Can be integrated into web applications with various UI options
  • Active development: Regularly updated and maintained by Mozilla and the community

Cons

  • Performance issues with large or complex PDFs
  • Some advanced PDF features may not be fully supported
  • Rendering accuracy can sometimes differ from native PDF viewers
  • Initial loading time can be slower compared to native PDF applications

Code Examples

  1. Basic PDF rendering:
// Specify the URL of the PDF document
var url = 'https://example.com/sample.pdf';

// Asynchronously load the PDF
pdfjsLib.getDocument(url).promise.then(function(pdf) {
  // Get the first page
  return pdf.getPage(1);
}).then(function(page) {
  var scale = 1.5;
  var viewport = page.getViewport({scale: scale});

  // Prepare canvas using PDF page dimensions
  var canvas = document.getElementById('pdf-canvas');
  var context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;

  // Render PDF page into canvas context
  var renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  page.render(renderContext);
});
  1. Displaying page text content:
pdf.getPage(1).then(function(page) {
  return page.getTextContent();
}).then(function(textContent) {
  // Extract text items
  var textItems = textContent.items.map(function(item) {
    return item.str;
  });
  console.log(textItems.join(' '));
});
  1. Handling document loading progress:
var loadingTask = pdfjsLib.getDocument(url);
loadingTask.onProgress = function(progressData) {
  if (progressData.total > 0) {
    var percent = (progressData.loaded / progressData.total) * 100;
    console.log('Loading: ' + percent.toFixed(2) + '%');
  }
};

Getting Started

  1. Include PDF.js in your project:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
  1. Create a canvas element in your HTML:
<canvas id="pdf-canvas"></canvas>
  1. Use the code from the first example above to render a PDF on the canvas.

  2. For more advanced usage, refer to the PDF.js documentation.

Competitor Comparisons

PdfParser, a standalone PHP library, provides various tools to extract data from a PDF file.

Pros of pdfparser

  • Lightweight and focused on parsing PDF content
  • Easier to integrate into PHP projects
  • Better suited for server-side PDF processing

Cons of pdfparser

  • Limited functionality compared to pdf.js
  • Smaller community and less frequent updates
  • Lacks browser-based rendering capabilities

Code Comparison

pdf.js (JavaScript):

pdfjsLib.getDocument('path/to/file.pdf').promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale });
    // ... (rendering code)
  });
});

pdfparser (PHP):

$parser = new \Smalot\PdfParser\Parser();
$pdf = $parser->parseFile('path/to/file.pdf');
$text = $pdf->getText();
echo $text;

Key Differences

  • pdf.js is primarily designed for client-side rendering in browsers, while pdfparser focuses on server-side parsing
  • pdf.js offers a more comprehensive set of features, including rendering and annotation support
  • pdfparser is more suitable for extracting text and metadata from PDFs in PHP applications
  • pdf.js has a larger community and more frequent updates, benefiting from Mozilla's backing
  • pdfparser is easier to use for simple text extraction tasks in PHP environments

Both libraries serve different purposes and excel in their respective domains. The choice between them depends on the specific requirements of your project and the development environment you're working in.

10,446

HTML to PDF converter for PHP

Pros of dompdf

  • Server-side PDF generation from HTML and CSS
  • Supports PHP, making it easy to integrate with PHP-based applications
  • Lightweight and doesn't require external dependencies

Cons of dompdf

  • Limited JavaScript support
  • May struggle with complex layouts or advanced CSS features
  • Slower rendering compared to client-side solutions

Code Comparison

dompdf:

require_once 'dompdf/autoload.inc.php';
$dompdf = new Dompdf();
$dompdf->loadHtml('<h1>Hello, World!</h1>');
$dompdf->render();
$dompdf->stream("document.pdf");

pdf.js:

pdfjsLib.getDocument('document.pdf').promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale });
    // Render page content
  });
});

Key Differences

  • pdf.js is primarily a client-side PDF viewer, while dompdf is a server-side PDF generator
  • pdf.js offers more interactive features and better performance for viewing PDFs in browsers
  • dompdf is better suited for generating PDFs from dynamic content in PHP applications
  • pdf.js has broader browser compatibility and is more actively maintained
  • dompdf is easier to set up for simple PDF generation tasks in PHP environments

A DOMPDF Wrapper for Laravel

Pros of laravel-dompdf

  • Seamless integration with Laravel framework
  • Server-side PDF generation, suitable for dynamic content
  • Supports HTML and CSS for PDF styling

Cons of laravel-dompdf

  • Limited JavaScript support compared to pdf.js
  • May have rendering inconsistencies across different browsers
  • Slower performance for large or complex documents

Code Comparison

laravel-dompdf:

use Barryvdh\DomPDF\Facade\Pdf;

$pdf = Pdf::loadView('pdf.invoice', $data);
return $pdf->download('invoice.pdf');

pdf.js:

pdfjsLib.getDocument('path/to/document.pdf').promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale });
    // Render page
  });
});

The code snippets demonstrate the different approaches:

  • laravel-dompdf focuses on server-side PDF generation from HTML/CSS
  • pdf.js is client-side and emphasizes PDF rendering and manipulation in the browser

Both libraries serve different purposes:

  • laravel-dompdf is ideal for generating PDFs from dynamic data in Laravel applications
  • pdf.js is better suited for displaying and interacting with existing PDFs in web browsers

Choose based on your specific requirements: server-side generation vs. client-side rendering and manipulation.

iText for Java represents the next level of SDKs for developers that want to take advantage of the benefits PDF can bring. Equipped with a better document engine, high and low-level programming capabilities and the ability to create, edit and enhance PDF documents, iText can be a boon to nearly every workflow.

Pros of iText

  • Robust Java-based PDF library with extensive features for creating, manipulating, and processing PDFs
  • Strong support for digital signatures and encryption
  • Better suited for server-side PDF generation and processing

Cons of iText

  • Commercial licensing required for many use cases
  • Steeper learning curve compared to PDF.js
  • Limited browser-based functionality

Code Comparison

iText (Java):

PdfDocument pdf = new PdfDocument(new PdfWriter(dest));
Document document = new Document(pdf);
document.add(new Paragraph("Hello World!"));
document.close();

PDF.js (JavaScript):

pdfjsLib.getDocument('path/to/document.pdf').promise.then(function(pdf) {
  pdf.getPage(1).then(function(page) {
    var scale = 1.5;
    var viewport = page.getViewport({ scale: scale });
    // Render page on canvas
  });
});

Key Differences

  • PDF.js is primarily designed for client-side PDF rendering in web browsers
  • iText offers more comprehensive PDF creation and manipulation capabilities
  • PDF.js is open-source and free to use, while iText requires licensing for commercial use
  • iText is better suited for complex PDF operations, while PDF.js excels in simple viewing and basic interactions

Both libraries have their strengths, with PDF.js being ideal for web-based PDF viewing and iText being more suitable for advanced PDF processing and generation tasks.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

PDF.js Build Status

PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5.

PDF.js is community-driven and supported by Mozilla. Our goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs.

Contributing

PDF.js is an open source project and always looking for more contributors. To get involved, visit:

Feel free to stop by our Matrix room for questions or guidance.

Getting Started

Online demo

Please note that the "Modern browsers" version assumes native support for the latest JavaScript features; please also see this wiki page.

Browser Extensions

Firefox

PDF.js is built into version 19+ of Firefox.

Chrome

  • The official extension for Chrome can be installed from the Chrome Web Store. This extension is maintained by @Rob--W.
  • Build Your Own - Get the code as explained below and issue npx gulp chromium. Then open Chrome, go to Tools > Extension and load the (unpackaged) extension from the directory build/chromium.

Getting the Code

To get a local copy of the current code, clone it using git:

$ git clone https://github.com/mozilla/pdf.js.git
$ cd pdf.js

Next, install Node.js via the official package or via nvm. If everything worked out, install all dependencies for PDF.js:

$ npm install

[!NOTE] On MacOS M1/M2 you may see some node-gyp-related errors when running npm install. This is because one of our dependencies, "canvas", does not provide pre-built binaries for this platform and instead npm will try to build it from source. Please make sure to first install the necessary native dependencies using brew: https://github.com/Automattic/node-canvas#compiling.

Finally, you need to start a local web server as some browsers do not allow opening PDF files using a file:// URL. Run:

$ npx gulp server

and then you can open:

Please keep in mind that this assumes the latest version of Mozilla Firefox; refer to Building PDF.js for non-development usage of the PDF.js library.

It is also possible to view all test PDF files on the right side by opening:

Building PDF.js

In order to bundle all src/ files into two production scripts and build the generic viewer, run:

$ npx gulp generic

If you need to support older browsers, run:

$ npx gulp generic-legacy

This will generate pdf.js and pdf.worker.js in the build/generic/build/ directory (respectively build/generic-legacy/build/). Both scripts are needed but only pdf.js needs to be included since pdf.worker.js will be loaded by pdf.js. The PDF.js files are large and should be minified for production.

Using PDF.js in a web application

To use PDF.js in a web application you can choose to use a pre-built version of the library or to build it from source. We supply pre-built versions for usage with NPM and Bower under the pdfjs-dist name. For more information and examples please refer to the wiki page on this subject.

Including via a CDN

PDF.js is hosted on several free CDNs:

Learning

You can play with the PDF.js API directly from your browser using the live demos below:

More examples can be found in the examples folder. Some of them are using the pdfjs-dist package, which can be built and installed in this repo directory via npx gulp dist-install command.

For an introduction to the PDF.js code, check out the presentation by our contributor Julian Viereck:

More learning resources can be found at:

The API documentation can be found at:

Questions

Check out our FAQs and get answers to common questions:

Talk to us on Matrix:

File an issue:

NPM DownloadsLast 30 Days