Top Related Projects
PdfParser, a standalone PHP library, provides various tools to extract data from a PDF file.
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
- 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);
});
- 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(' '));
});
- 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
- Include PDF.js in your project:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
- Create a canvas element in your HTML:
<canvas id="pdf-canvas"></canvas>
-
Use the code from the first example above to render a PDF on the canvas.
-
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.
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
PDF.js
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:
- Issue Reporting Guide
- Code Contribution Guide
- Frequently Asked Questions
- Good Beginner Bugs
- Projects
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.
-
Modern browsers: https://mozilla.github.io/pdf.js/web/viewer.html
-
Older browsers: https://mozilla.github.io/pdf.js/legacy/web/viewer.html
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 toTools > Extension
and load the (unpackaged) extension from the directorybuild/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 runningnpm install
. This is because one of our dependencies,"canvas"
, does not provide pre-built binaries for this platform and insteadnpm
will try to build it from source. Please make sure to first install the necessary native dependencies usingbrew
: 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:
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://cdnjs.com/libraries/pdf.js
- https://unpkg.com/pdfjs-dist/
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:
Top Related Projects
PdfParser, a standalone PHP library, provides various tools to extract data from a PDF file.
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.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot