pdfkit vs pdfmake vs react-pdf
PDF生成ライブラリ
pdfkitpdfmakereact-pdf類似パッケージ:

PDF生成ライブラリ

PDF生成ライブラリは、プログラムからPDFドキュメントを作成するためのツールです。これらのライブラリは、テキスト、画像、図形などの要素を組み合わせて、カスタマイズ可能なPDFファイルを生成する機能を提供します。これにより、開発者はアプリケーション内で動的にPDFを生成し、ユーザーに提供することができます。

npmのダウンロードトレンド

3 年

GitHub Starsランキング

統計詳細

パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
pdfkit010,6368.45 MB4001ヶ月前MIT
pdfmake012,25815.3 MB2351ヶ月前MIT
react-pdf011,041309 kB242ヶ月前MIT

機能比較: pdfkit vs pdfmake vs react-pdf

カスタマイズ性

  • pdfkit:

    PDFKitは、テキスト、画像、図形、フォントなどを自由に組み合わせてPDFを作成できる高いカスタマイズ性を持っています。開発者は、ページサイズ、マージン、フォントスタイルなどを細かく設定でき、独自のデザインを実現できます。

  • pdfmake:

    pdfmakeは、JSONオブジェクトを使用して文書を定義するため、構造が明確で、複雑なレイアウトを簡単に作成できます。特に、テーブルやリストなどの複雑な要素を簡単に扱えるため、柔軟なカスタマイズが可能です。

  • react-pdf:

    react-pdfは、Reactのコンポーネントを使用してPDFを生成するため、Reactの特性を活かしたカスタマイズが可能です。コンポーネントベースのアプローチにより、再利用性が高く、状態管理が容易です。

使用シナリオ

  • pdfkit:

    PDFKitは、サーバーサイドでのPDF生成に最適です。特に、バックエンドでデータを処理し、ユーザーにPDFレポートや請求書を提供する場合に適しています。

  • pdfmake:

    pdfmakeは、クライアントサイドでの動的なPDF生成に適しています。例えば、ユーザーが入力したデータを基にPDFを生成するアプリケーションや、複雑なデータを含むドキュメントを作成する場合に便利です。

  • react-pdf:

    react-pdfは、ReactアプリケーションにPDF表示機能を統合するのに最適です。ユーザーがPDFを直接アプリケーション内で表示したり、印刷したりする必要がある場合に特に役立ちます。

学習曲線

  • pdfkit:

    PDFKitは、シンプルなAPIを提供しているため、比較的学習が容易です。しかし、複雑なレイアウトを作成する場合は、より多くの知識が必要となる可能性があります。

  • pdfmake:

    pdfmakeは、JSON形式での文書定義に慣れる必要があるため、最初は少し学習曲線がありますが、柔軟性が高く、複雑な文書を簡単に作成できるようになります。

  • react-pdf:

    react-pdfは、Reactに慣れている開発者にとっては非常に直感的です。ReactのコンポーネントとしてPDFを扱うため、既存のReactの知識を活かすことができます。

パフォーマンス

  • pdfkit:

    PDFKitは、サーバーサイドで動作するため、大量のPDFを生成する際にサーバーのリソースを消費します。適切なキャッシングや最適化を行うことで、パフォーマンスを向上させることが可能です。

  • pdfmake:

    pdfmakeは、クライアントサイドで動作するため、ユーザーのブラウザの性能に依存します。複雑な文書を生成する場合、パフォーマンスに影響を与える可能性がありますが、適切に最適化することで改善できます。

  • react-pdf:

    react-pdfは、Reactアプリケーション内でのPDF生成に特化しており、DOMの変更に基づいてPDFを生成します。これにより、ユーザーインターフェースが反応的で、PDF生成がスムーズに行えます。

サポートとメンテナンス

  • pdfkit:

    PDFKitは、広く使用されているため、コミュニティによるサポートが豊富です。ドキュメントも充実しており、問題解決が容易です。

  • pdfmake:

    pdfmakeは、活発な開発が行われており、定期的にアップデートされています。ドキュメントも充実しており、サポートも受けやすいです。

  • react-pdf:

    react-pdfは、Reactエコシステムの一部であり、コミュニティのサポートが豊富です。ドキュメントも整備されており、Reactの更新に合わせてメンテナンスされています。

選び方: pdfkit vs pdfmake vs react-pdf

  • pdfkit:

    PDFKitは、Node.js環境でPDFを生成するためのシンプルで強力なライブラリです。カスタマイズ性が高く、複雑なレイアウトやスタイルを必要とする場合に適しています。特に、サーバーサイドでPDFを生成する必要がある場合に選択してください。

  • pdfmake:

    pdfmakeは、クライアントサイドとサーバーサイドの両方で使用できるPDF生成ライブラリで、JSON形式で文書を定義することができます。特に、動的なコンテンツを持つPDFを生成する必要がある場合や、複雑なテーブルやスタイルが必要な場合に適しています。

  • react-pdf:

    react-pdfは、Reactアプリケーション内でPDFを表示および生成するためのライブラリです。ReactコンポーネントとしてPDFを作成できるため、Reactのコンポーネントベースのアプローチを活かしたい場合に選択してください。特に、ユーザーインターフェースにPDFを統合したい場合に適しています。

pdfkit の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

Use npm or yarn package manager. Just type the following command:

# with npm
npm install pdfkit

# with yarn
yarn add 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)
  • Tables
  • 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 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, 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.