@react-pdf/renderer vs pdf-lib vs pdfjs-dist vs react-pdf vs react-pdf-html
React 生態系における PDF 処理：生成、閲覧、編集の選び方
パッケージを検索...
@react-pdf/rendererpdf-libpdfjs-distreact-pdfreact-pdf-html類似パッケージ:

React 生態系における PDF 処理：生成、閲覧、編集の選び方

これらの 5 つのライブラリは、PDF 処理の異なる側面をカバーしています。@react-pdf/renderer と pdf-lib は PDF の生成・編集に特化しており、一方 react-pdf と pdfjs-dist は既存 PDF の閲覧・表示を目的としています。react-pdf-html は HTML コンテンツを PDF 構造に変換する橋渡し役として機能します。開発者は「作りたいのか」「見せたいのか」「編集したいのか」を明確に区別して選定する必要があります。

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

3 年

GitHub Starsランキング

統計詳細

パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
@react-pdf/renderer016,597292 kB4091ヶ月前MIT
pdf-lib08,478-3155年前MIT
pdfjs-dist053,37335.3 MB4521ヶ月前Apache-2.0
react-pdf011,074309 kB203ヶ月前MIT
react-pdf-html0214361 kB415ヶ月前MIT

React 環境での PDF 処理：生成、閲覧、編集の選び方

React プロジェクトで PDF を扱う際、最も多い混乱は「PDF を作りたいのか」「見せたいのか」の区別です。今回比較する 5 つのライブラリは、この目的によって明確に役割が分かれています。@react-pdf/renderer と pdf-lib は PDF を生成・編集するためのツールであり、react-pdf と pdfjs-dist は既存の PDF を表示するためのツールです。react-pdf-html はその中間で、HTML を PDF 生成用のデータに変換します。

実務では、これらを単独で使うこともあれば、組み合わせて使うこともあります。例えば、pdf-lib で既存フォームを読み込み、@react-pdf/renderer で新規ページを追加し、react-pdf で結果を確認するといった流れです。それぞれの強みと限界を理解し、適切な場面で使い分けることが重要です。

🛠️ PDF 生成：React コンポーネント vs 低レベル操作

PDF を新しく作る場合、主に @react-pdf/renderer と pdf-lib のどちらかを選ぶことになります。前者は React の知識で書け、後者は PDF 構造を直接扱います。

@react-pdf/renderer は、React コンポーネントのように書いて PDF を生成します。

  • <Document> や <Page> といったコンポーネントを使います。
  • style props で CSS のように装飾できます。
  • 動的なデータ表示に強く、請求書やレポート生成に最適です。
// @react-pdf/renderer: React 風に PDF 生成
import { Document, Page, Text, StyleSheet } from '@react-pdf/renderer';

const styles = StyleSheet.create({ text: { fontSize: 12 } });

const MyDocument = () => (
  <Document>
    <Page size="A4">
      <Text style={styles.text}>Hello World</Text>
    </Page>
  </Document>
);

pdf-lib は、既存の PDF を読み込んで編集したり、低レベルから作成したりします。

  • React に依存せず、Node.js やブラウザで動作します。
  • 既存 PDF への追記、結合、フォームフィールドへの入力などが得意です。
  • レイアウトを細かく制御できますが、コードは命令的になります。
// pdf-lib: 既存 PDF の編集
import { PDFDocument } from 'pdf-lib';

const editPdf = async (existingPdfBytes) => {
  const pdfDoc = await PDFDocument.load(existingPdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];
  
  // 直接座標を指定して描画
  firstPage.drawText('Edited with pdf-lib', { x: 50, y: 500, size: 15 });
  
  return await pdfDoc.save();
};

👁️ PDF 閲覧：ラッパー vs エンジン本体

既存の PDF ファイルをユーザーに見せる場合、react-pdf と pdfjs-dist が候補になります。実は react-pdf は pdfjs-dist を内部で使っているラッパーパッケージです。

react-pdf は、React アプリで PDF を表示するための標準的なラッパーです。

  • pdfjs-dist の複雑な設定を隠蔽しています。
  • <Document> と <Page> コンポーネントで簡単に埋め込めます。
  • ページネーションやローディング状態の管理が容易です。
// react-pdf: PDF 表示ラッパー
import { Document, Page } from 'react-pdf';

function PdfViewer({ file }) {
  return (
    <Document file={file}>
      <Page pageNumber={1} width={600} />
    </Document>
  );
}

pdfjs-dist は、Mozilla が開発する PDF 描画エンジンの本体です。

  • ラッパーを通さないため、設定の自由度が最高です。
  • Worker の設定やレンダリング先の Canvas 管理を自分で行う必要があります。
  • 独自のビューアー UI を完全に自作する場合に使用します。
// pdfjs-dist: 低レベルレンダリング
import * as pdfjsLib from 'pdfjs-dist';

const renderPdf = async (url) => {
  const loadingTask = pdfjsLib.getDocument(url);
  const pdf = await loadingTask.promise;
  const page = await pdf.getPage(1);
  
  // Canvas への描画を手动で管理
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');
  await page.render({ canvasContext: context, viewport: page.getViewport({ scale: 1.5 }) }).promise;
};

🔄 HTML から PDF へ：変換の橋渡し

Web 上には HTML 形式のコンテンツが多く存在します。これを PDF にしたい場合、react-pdf-html が役立ちます。

react-pdf-html は、HTML 文字列を @react-pdf/renderer が理解できる要素に変換します。

  • CMS から取得したリッチテキストを PDF にする場合に便利です。
  • 内部で @react-pdf/renderer を使用しているため、統合がスムーズです。
  • ただし、サポートされる CSS プロパティは限られているため注意が必要です。
// react-pdf-html: HTML を PDF 要素に変換
import { Html } from 'react-pdf-html';
import { Document, Page } from '@react-pdf/renderer';

const HtmlToPdf = ({ content }) => (
  <Document>
    <Page>
      {/* HTML 文字列を PDF 互換要素にパース */}
      <Html content={content} />
    </Page>
  </Document>
);

📊 選定マトリックス：目的別のおすすめ

目的推奨パッケージ理由
React で PDF を新規作成@react-pdf/rendererReact コンポーネントで書けるため開発効率が高い
既存 PDF の編集・結合pdf-lib既存バイナリを直接操作できる唯一の選択肢
React で PDF を表示react-pdf実装が簡単で、必要な機能が揃っている
独自の PDF ビューアー作成pdfjs-dist描画エンジンそのものなので自由度が高い
HTML コンテンツを PDF 化react-pdf-htmlHTML 構造を PDF 要素へ変換する手間を省ける

⚠️ 注意点：名前が似ているパッケージ

@react-pdf/renderer と react-pdf は名前が似ていますが、役割が真逆です。

  • @react-pdf/renderer → 作成 (Create)
  • react-pdf → 閲覧 (View)

インポート元を間違えると、コンポーネント名 (Document, Page) が被っており、動作しないか予期せぬエラーになります。必ずパッケージ名を確認してください。

// 間違いやすい例
import { Document } from 'react-pdf'; // 閲覧用
import { Document } from '@react-pdf/renderer'; // 生成用

💡 結論：適切なツールの組み合わせ

これら 5 つのライブラリは、競合するものではなく、補完し合うものです。プロジェクトの要件に応じて以下のように選定します。

  • 動的な書類発行システム → @react-pdf/renderer を中心に、必要に応じて react-pdf-html を併用。
  • ドキュメント管理ビューアー → react-pdf で表示し、サーバー側で pdf-lib を使い事前処理。
  • 特殊な PDF 操作ツール → pdf-lib で編集機能を実装し、pdfjs-dist で詳細なプレビュー表示。

最終的なアドバイス：まずは「作成」か「閲覧」かを明確にしましょう。その上で、React の知識を活かしたいなら @react-pdf/renderer と react-pdf の組み合わせが最も開発体験が良くなります。既存資産の編集が必要な場合のみ、pdf-lib の導入を検討してください。

選び方: @react-pdf/renderer vs pdf-lib vs pdfjs-dist vs react-pdf vs react-pdf-html

  • @react-pdf/renderer:

    React コンポーネントを使って PDF をゼロから生成したい場合に選択します。CSS に似たスタイル props でレイアウトを組めるため、React 開発者にとって学習コストが低く、動的なレポートや請求書生成に適しています。

  • pdf-lib:

    既存の PDF ファイルを編集・加工（結合、分割、フォーム記入）したい場合に選択します。React に依存しない純粋な JavaScript ライブラリであり、サーバーサイドでのバッチ処理や既存書類の改ざん防止付き編集に向いています。

  • pdfjs-dist:

    PDF 閲覧機能を最も低いレベルで制御したい場合に選択します。Mozilla が開発するレンダリングエンジンの本体であり、独自の UI を完全に自作する場合や、react-pdf では実現できない特殊な表示要件がある時に使用します。

  • react-pdf:

    React アプリケーション内で既存の PDF ファイルを閲覧・表示したい場合に選択します。pdfjs-dist をラップしており、ページネーションやズーム機能を実装する手間が省けるため、ドキュメントビューアー構築の標準的な選択肢です。

  • react-pdf-html:

    CMS などから取得したHTML 文字列を PDF に変換したい場合に選択します。@react-pdf/renderer の内部で動作し、HTML タグを PDF 要素に変換しますが、サポートされる CSS プロパティが限られるため、シンプルな文書変換に適しています。

@react-pdf/rendererと類似したnpmパッケージ

@react-pdf/rendererは、Reactアプリケーション用のPDFドキュメントを生成するためのライブラリです。このライブラリを使用すると、Reactコンポーネントを使用してPDFを作成し、スタイルを適用することができます。@react-pdf/rendererは、Reactの開発者にとって非常に便利なツールですが、他にもPDF生成のための代替ライブラリがあります。以下はそのいくつかです。

  • jspdfは、クライアントサイドでPDFドキュメントを生成するための人気のあるライブラリです。シンプルなAPIを提供し、テキスト、画像、図形などをPDFに追加することができます。jspdfは、特に簡単なPDF生成が必要な場合に適しており、広く使用されています。Reactに特化していないため、他のフレームワークでも利用可能です。

  • pdfmakeは、より複雑なPDFドキュメントを生成するためのライブラリです。JSON形式でドキュメントの構造を定義し、スタイルやフォーマットを細かく指定することができます。pdfmakeは、特にレポートや複雑なレイアウトを必要とするアプリケーションに適しています。カスタマイズ性が高く、さまざまな要件に対応可能です。

  • react-pdfは、Reactアプリケーション内でPDFを表示するためのライブラリですが、PDFの生成機能も提供しています。@react-pdf/rendererと似たアプローチを取っており、Reactコンポーネントを使用してPDFを作成することができます。主にPDFの表示に特化していますが、生成機能も利用できるため、ニーズに応じて選択できます。

これらのライブラリの比較については、以下のリンクをご覧ください: @react-pdf/renderer vs jspdf vs pdfmake vs react-pdfの比較。

pdf-libと類似したnpmパッケージ

pdf-lib は、JavaScript で PDF ドキュメントを作成、編集、操作するためのライブラリです。このライブラリは、ブラウザや Node.js 環境で動作し、PDF ファイルの生成や変更をシンプルかつ効率的に行うことができます。pdf-lib を使用すると、テキスト、画像、図形を PDF に追加したり、既存の PDF を編集したりすることができます。特に、クライアントサイドで PDF を生成する必要があるアプリケーションにおいて、その柔軟性と使いやすさが評価されています。

pdf-lib の代替としては、pdfkit があります。pdfkit は、Node.js 環境で PDF ドキュメントを生成するための強力なライブラリです。pdfkit は、ストリーミング API を使用して PDF を生成するため、大きなドキュメントや動的なコンテンツの作成に適しています。pdfkit は、テキスト、画像、図形を PDF に追加するための多くの機能を提供し、カスタマイズ可能なスタイルやレイアウトをサポートしています。

pdf-lib と pdfkit の比較を確認するには、以下のリンクをご覧ください: Comparing pdf-lib vs pdfkit。

pdfjs-distと類似したnpmパッケージ

pdfjs-distは、PDFファイルを操作するためのJavaScriptライブラリで、特にWebアプリケーションでのPDF表示に利用されます。このライブラリは、Mozillaによって開発されており、PDFファイルをHTML5キャンバスにレンダリングする機能を提供します。pdfjs-distは、PDFの内容を表示するだけでなく、テキストや画像の抽出、ページのナビゲーションなど、さまざまな機能をサポートしています。しかし、PDFを操作するための他のライブラリも存在します。以下は、そのいくつかの代替案です。

  • pdf-libは、PDFファイルを生成、編集、操作するための強力なライブラリです。このライブラリは、PDFの作成や既存のPDFの編集を簡単に行うことができ、テキスト、画像、フォームフィールドの追加や変更が可能です。pdf-libは、特にPDFの生成や編集が必要なプロジェクトに適しており、クライアントサイドでのPDF操作を簡素化します。
  • pdf-parseは、PDFファイルからテキストを抽出するためのシンプルなライブラリです。Node.js環境で使用されることが多く、PDFの内容を簡単に取得することができます。pdf-parseは、PDFファイルの解析に特化しており、PDFの内容をプログラムで扱いたい場合に便利です。

これらのライブラリの比較を確認するには、以下のリンクを参照してください: Comparing pdf-lib vs pdf-parse vs pdfjs-dist。

react-pdfと類似したnpmパッケージ

react-pdf は、React アプリケーションで PDF ドキュメントを表示するためのライブラリです。このライブラリを使用すると、PDF ファイルを簡単にレンダリングし、ユーザーに表示することができます。特に、PDF ドキュメントをアプリケーション内で直接表示する必要がある場合に便利です。react-pdf は、PDF ビューアーの機能を提供し、さまざまなカスタマイズオプションを利用して、ユーザーエクスペリエンスを向上させることができます。

react-pdf の代替として、以下のライブラリがあります：

  • @react-pdf/renderer は、React コンポーネントを使用して PDF ドキュメントを生成するためのライブラリです。このライブラリは、React のコンポーネントベースのアプローチを利用して、動的に PDF を作成することができます。@react-pdf/renderer を使用すると、アプリケーション内でのデータを基にして PDF を生成し、ユーザーにダウンロードや印刷を提供することが可能です。特に、サーバーサイドで PDF を生成する必要がある場合や、ユーザーの入力に基づいてカスタマイズされた PDF を作成する場合に適しています。

これらのライブラリの比較については、以下のリンクを参照してください：Comparing @react-pdf/renderer vs react-pdf。

react-pdf-htmlと類似したnpmパッケージ

react-pdf-htmlは、ReactアプリケーションでPDFをHTMLとして表示するためのライブラリです。このライブラリは、PDFドキュメントをHTML要素としてレンダリングし、スタイルやインタラクションを加えることができます。react-pdf-htmlは、PDFの表示と操作を簡素化するための便利なツールですが、同様の機能を持つ他のライブラリも存在します。以下にいくつかの代替ライブラリを紹介します。

  • @react-pdf/rendererは、Reactコンポーネントを使用してPDFを生成するためのライブラリです。このライブラリは、Reactのコンポーネントベースのアプローチを活用して、PDFドキュメントを作成することができます。デザインやレイアウトを簡単にカスタマイズできるため、PDF生成が必要なプロジェクトに適しています。
  • pdf-libは、PDFドキュメントを作成、編集、操作するための軽量なライブラリです。このライブラリは、PDFファイルの生成や編集を行うための強力なAPIを提供し、特にPDFの操作に特化しています。pdf-libは、PDFファイルをプログラムで操作したい開発者にとって非常に便利です。
  • pdfjs-distは、Mozillaが開発したPDF.jsライブラリのディストリビューションです。このライブラリは、PDFファイルをブラウザで表示するための強力なツールであり、PDFをHTML5キャンバスにレンダリングすることができます。pdfjs-distは、PDFの表示に特化しており、特に大規模なPDFドキュメントを扱う際に役立ちます。
  • react-pdfは、ReactアプリケーションでPDFを表示するためのライブラリです。このライブラリは、PDF.jsを基にしており、PDFファイルをReactコンポーネントとして簡単に表示することができます。react-pdfは、PDFの表示に特化しており、使いやすさとパフォーマンスを兼ね備えています。

これらのライブラリの比較については、以下のリンクをご覧ください：Comparing @react-pdf/renderer vs pdf-lib vs pdfjs-dist vs react-pdf vs react-pdf-html.

@react-pdf/renderer のREADME

React renderer for creating PDF files on the browser and server

How to install

yarn add @react-pdf/renderer

How it works

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

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

Web. Render in DOM

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

Node. Save in a file

import React from 'react';
import ReactPDF from '@react-pdf/renderer';

ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);

Contributors

This project exists thanks to all the people who contribute. Looking to contribute? Please check our [contribute] document for more details about how to setup a development environment and submitting code.

Sponsors

Thank you to all our sponsors! [Become a sponsors]

Backers

Thank you to all our backers! [Become a backer]

License

MIT © Diego Muracciole

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.