Convert Figma logo to code with AI

foliojs logopdfkit

A JavaScript PDF generation library for Node and the browser

9,788
1,144
9,788
435

Top Related Projects

47,890

PDF Reader in JavaScript

11,595

Client/server side PDF printing in pure JavaScript

29,192

Client-side JavaScript PDF generation for everyone.

14,643

📄 Create PDF files using React

Quick Overview

PDFKit is a JavaScript library for creating PDF documents in both the browser and Node.js environments. It provides a powerful and flexible API for generating complex PDF documents with features like vector graphics, text formatting, and image embedding.

Pros

  • Cross-platform compatibility (works in both browser and Node.js)
  • Rich feature set for creating complex PDF documents
  • Extensive documentation and examples
  • Active development and community support

Cons

  • Learning curve for complex document creation
  • Limited support for advanced PDF features like form filling
  • Performance can be slower for large documents
  • File size of generated PDFs can be large for complex documents

Code Examples

Creating a simple PDF document:

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));

doc.text('Hello, World!');
doc.end();

Adding an image to a PDF:

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('image.pdf'));

doc.image('path/to/image.png', {
  fit: [250, 300],
  align: 'center',
  valign: 'center'
});

doc.end();

Creating a table in a PDF:

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('table.pdf'));

const table = {
  headers: ['Name', 'Age', 'Country'],
  rows: [
    ['John Doe', '30', 'USA'],
    ['Jane Smith', '25', 'Canada'],
    ['Bob Johnson', '45', 'UK']
  ]
};

doc.table(table, {
  prepareHeader: () => doc.font('Helvetica-Bold'),
  prepareRow: (row, i) => doc.font('Helvetica').fontSize(12)
});

doc.end();

Getting Started

To use PDFKit in your project, first install it via npm:

npm install pdfkit

Then, in your JavaScript file:

const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a document
const doc = new PDFDocument();

// Pipe its output somewhere, like to a file or HTTP response
doc.pipe(fs.createWriteStream('output.pdf'));

// Add content to the PDF here
doc.fontSize(25).text('Hello, World!', 100, 100);

// Finalize PDF file
doc.end();

This will create a simple PDF file with the text "Hello, World!" in it.

Competitor Comparisons

47,890

PDF Reader in JavaScript

Pros of pdf.js

  • Renders PDFs directly in web browsers, providing a consistent viewing experience across platforms
  • Supports a wide range of PDF features, including forms, annotations, and interactive elements
  • Actively maintained by Mozilla with regular updates and improvements

Cons of pdf.js

  • Primarily focused on PDF rendering and viewing, not PDF creation or manipulation
  • Can be resource-intensive for large or complex PDF files, potentially impacting performance
  • Requires additional setup and configuration for server-side usage

Code Comparison

pdf.js (Rendering a PDF):

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 });
    // ... (additional rendering code)
  });
});

PDFKit (Creating a PDF):

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Hello, World!');
doc.end();

While pdf.js excels at rendering PDFs in web browsers, PDFKit is better suited for server-side PDF generation and manipulation. pdf.js offers a more comprehensive PDF viewing experience, while PDFKit provides a simpler API for creating PDFs programmatically.

11,595

Client/server side PDF printing in pure JavaScript

Pros of pdfmake

  • Declarative approach to PDF creation, using JavaScript objects to define document structure
  • Built-in support for tables, lists, and other complex layouts
  • Automatic page breaks and text wrapping

Cons of pdfmake

  • Less flexibility for low-level PDF manipulation
  • Steeper learning curve for complex customizations
  • Limited support for advanced graphics and custom fonts

Code Comparison

pdfmake:

var docDefinition = {
  content: [
    'First paragraph',
    'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
  ]
};
pdfMake.createPdf(docDefinition).download();

PDFKit:

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('First paragraph');
doc.text('Another paragraph, this time a little bit longer...');
doc.end();

Both libraries offer ways to create PDFs, but pdfmake uses a more declarative approach with a document definition object, while PDFKit provides a more imperative API for building PDFs. pdfmake excels at structured documents with automatic layout, while PDFKit offers more fine-grained control over PDF content and structure.

29,192

Client-side JavaScript PDF generation for everyone.

Pros of jsPDF

  • Runs in both browser and Node.js environments
  • Supports a wider range of fonts, including custom fonts
  • More extensive documentation and examples

Cons of jsPDF

  • Larger file size and potentially slower performance
  • Less intuitive API for complex layouts
  • Limited support for advanced PDF features

Code Comparison

jsPDF:

var doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.addPage();
doc.text('Page 2', 10, 10);
doc.save('two-page.pdf');

PDFKit:

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Hello world!', 100, 100);
doc.addPage();
doc.end();

Both libraries offer similar basic functionality for creating PDFs, but PDFKit's API is generally more streamlined and intuitive for complex documents. jsPDF provides more flexibility in terms of environment and font support, while PDFKit excels in performance and advanced PDF features. The choice between the two depends on specific project requirements and the target environment.

14,643

📄 Create PDF files using React

Pros of react-pdf

  • Seamless integration with React applications
  • Declarative approach to PDF creation using JSX syntax
  • Built-in support for responsive layouts and dynamic content

Cons of react-pdf

  • Limited to React ecosystem, not suitable for non-React projects
  • Steeper learning curve for developers unfamiliar with React concepts
  • May have performance limitations for very large or complex PDFs

Code Comparison

react-pdf:

import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

const MyDocument = () => (
  <Document>
    <Page>
      <View>
        <Text>Hello, World!</Text>
      </View>
    </Page>
  </Document>
);

PDFKit:

const PDFDocument = require('pdfkit');
const doc = new PDFDocument();

doc.pipe(fs.createWriteStream('output.pdf'));
doc.text('Hello, World!');
doc.end();

The react-pdf example demonstrates its declarative approach using JSX, while PDFKit uses a more imperative style. react-pdf's syntax may be more familiar to React developers, but PDFKit's approach is more straightforward for general JavaScript use.

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

PDFKit

A JavaScript PDF generation library for Node and the browser.

Description

PDFKit is a PDF document generation library for Node and the browser that makes creating complex, multi-page, printable documents easy. The API embraces chainability, and includes both low level functions as well as abstractions for higher level functionality. The PDFKit API is designed to be simple, so generating complex documents is often as simple as a few function calls.

Check out some of the documentation and examples to see for yourself! You can also read the guide as a self-generated PDF with example output displayed inline. If you'd like to see how it was generated, check out the README in the docs folder.

You can also try out an interactive in-browser demo of PDFKit here.

Installation

Installation uses the npm package manager. Just type the following command after installing npm.

npm install pdfkit

Features

  • Vector graphics
    • HTML5 canvas-like API
    • Path operations
    • SVG path parser for easy path creation
    • Transformations
    • Linear and radial gradients
  • Text
    • Line wrapping (with soft hyphen recognition)
    • Text alignments
    • Bulleted lists
  • Font embedding
    • Supports TrueType (.ttf), OpenType (.otf), WOFF, WOFF2, TrueType Collections (.ttc), and Datafork TrueType (.dfont) fonts
    • Font subsetting
    • See fontkit for more details on advanced glyph layout support.
  • Image embedding
    • Supports JPEG and PNG files (including indexed PNGs, and PNGs with transparency)
  • Annotations
    • Links
    • Notes
    • Highlights
    • Underlines
    • etc.
  • AcroForms
  • Outlines
  • PDF security
    • Encryption
    • Access privileges (printing, copying, modifying, annotating, form filling, content accessibility, document assembly)
  • Accessibility support (marked content, logical structure, Tagged PDF, PDF/UA)

Coming soon!

  • Patterns fills
  • Higher level APIs for creating tables and laying out content
  • More performance optimizations
  • Even more awesomeness, perhaps written by you! Please fork this repository and send me pull requests.

Example

const PDFDocument = require('pdfkit');
const fs = require('fs');

// Create a document
const doc = new PDFDocument();

// Pipe its output somewhere, like to a file or HTTP response
// See below for browser usage
doc.pipe(fs.createWriteStream('output.pdf'));

// Embed a font, set the font size, and render some text
doc
  .font('fonts/PalatinoBold.ttf')
  .fontSize(25)
  .text('Some text with an embedded font!', 100, 100);

// Add an image, constrain it to a given size, and center it vertically and horizontally
doc.image('path/to/image.png', {
  fit: [250, 300],
  align: 'center',
  valign: 'center'
});

// Add another page
doc
  .addPage()
  .fontSize(25)
  .text('Here is some vector graphics...', 100, 100);

// Draw a triangle
doc
  .save()
  .moveTo(100, 150)
  .lineTo(100, 250)
  .lineTo(200, 250)
  .fill('#FF3300');

// Apply some transforms and render an SVG path with the 'even-odd' fill rule
doc
  .scale(0.6)
  .translate(470, -380)
  .path('M 250,75 L 323,301 131,161 369,161 177,301 z')
  .fill('red', 'even-odd')
  .restore();

// Add some text with annotations
doc
  .addPage()
  .fillColor('blue')
  .text('Here is a link!', 100, 100)
  .underline(100, 100, 160, 27, { color: '#0000FF' })
  .link(100, 100, 160, 27, 'http://google.com/');

// Finalize PDF file
doc.end();

The PDF output from this example (with a few additions) shows the power of PDFKit — producing complex documents with a very small amount of code. For more, see the demo folder and the PDFKit programming guide.

Browser Usage

There are three ways to use PDFKit in the browser:

In addition to PDFKit, you'll need somewhere to stream the output to. HTML5 has a Blob object which can be used to store binary data, and get URLs to this data in order to display PDF output inside an iframe, or upload to a server, etc. In order to get a Blob from the output of PDFKit, you can use the blob-stream module.

The following example uses Browserify or webpack to load PDFKit and blob-stream. See here and here for examples of prebuilt version usage.

// require dependencies
const PDFDocument = require('pdfkit');
const blobStream = require('blob-stream');

// create a document the same way as above
const doc = new PDFDocument();

// pipe the document to a blob
const stream = doc.pipe(blobStream());

// add your content to the document here, as usual

// get a blob when you are done
doc.end();
stream.on('finish', function() {
  // get a blob you can do whatever you like with
  const blob = stream.toBlob('application/pdf');

  // or get a blob URL for display in the browser
  const url = stream.toBlobURL('application/pdf');
  iframe.src = url;
});

You can see an interactive in-browser demo of PDFKit here.

Note that in order to Browserify a project using PDFKit, you need to install the brfs module with npm, which is used to load built-in font data into the package. It is listed as a devDependency in PDFKit's package.json, so it isn't installed by default for Node users. If you forget to install it, Browserify will print an error message.

Documentation

For complete API documentation and more examples, see the PDFKit website.

License

PDFKit is available under the MIT license.

NPM DownloadsLast 30 Days