PDF操作ライブラリの深掘り比較：pdf-lib vs pdf-parse vs pdfjs-dist

PDFをWebアプリで扱う際、「生成」「解析」「表示」という3つの主要な要件があります。pdf-lib、pdf-parse、pdfjs-distはそれぞれ異なる領域に特化しており、混同するとアーキテクチャに無駄が生じます。この記事では、実際のコード例を交えながら、各ライブラリの役割と使い分けを明確にします。

📄 PDFの生成・編集：pdf-lib

pdf-libはPDFの作成と変更に特化しています。既存のPDFを読み込んでテキストや画像を重ね書きしたり、複数のPDFをマージしたりできます。ただし、PDFを画面に表示する機能はありません。

基本的なPDF生成

import { PDFDocument, StandardFonts } from 'pdf-lib';

// 新しいPDFドキュメントを作成
const pdfDoc = await PDFDocument.create();
const page = pdfDoc.addPage([500, 600]);

// フォントを埋め込み
const font = await pdfDoc.embedFont(StandardFonts.Helvetica);

// テキストを描画
page.drawText('Hello, world!', {
  x: 50,
  y: 500,
  size: 24,
  font
});

// Uint8Arrayとして出力
const pdfBytes = await pdfDoc.save();

既存PDFの編集

import { PDFDocument } from 'pdf-lib';

// 既存PDFを読み込み
const existingPdfBytes = await fetch('/form.pdf').then(res => res.arrayBuffer());
const pdfDoc = await PDFDocument.load(existingPdfBytes);
const pages = pdfDoc.getPages();
const firstPage = pages[0];

// 日付を追加
firstPage.drawText(new Date().toLocaleDateString(), {
  x: 100,
  y: 200,
  size: 12
});

const modifiedPdfBytes = await pdfDoc.save();

💡 注意: pdf-libはPDFの構造を変更できますが、視覚的レンダリングはできません。生成したPDFを表示するには別途<iframe>やpdfjs-distが必要です。

🔍 テキスト抽出：pdf-parse

pdf-parseはPDFからプレーンテキストを抽出することに特化しています。Node.js環境専用で、ブラウザでは動作しません。レイアウトやスタイル情報は失われますが、シンプルなテキスト取得には十分です。

Node.jsでのテキスト抽出

// このコードはNode.js環境でのみ動作
const fs = require('fs');
const pdf = require('pdf-parse');

const dataBuffer = fs.readFileSync('document.pdf');
const result = await pdf(dataBuffer);

console.log(result.text); // 抽出されたテキスト
console.log(result.numpages); // ページ数

⚠️ 制限: pdf-parseはテキストコンテンツのみを返し、座標やフォント情報などは含まれません。また、スキャンされたPDF（画像ベース）からはテキストを抽出できません。

👁️ ブラウザ表示と高度な解析：pdfjs-dist

pdfjs-distはMozillaのPDF.jsの公式配布版で、ブラウザでのPDF表示を実現します。CanvasやSVGを使って高品質にレンダリングし、テキスト選択や検索もサポートします。

PDFの表示

import * as pdfjsLib from 'pdfjs-dist';

// PDF.jsのワーカーを設定（必須）
pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.js';

const loadingTask = pdfjsLib.getDocument('/sample.pdf');
const pdf = await loadingTask.promise;

// 最初のページを取得
const page = await pdf.getPage(1);

// Canvasにレンダリング
const canvas = document.getElementById('pdf-canvas');
const viewport = page.getViewport({ scale: 1.5 });
canvas.height = viewport.height;
canvas.width = viewport.width;

const renderContext = {
  canvasContext: canvas.getContext('2d'),
  viewport
};
await page.render(renderContext).promise;

テキストレイヤーの取得

// 同じページからテキスト情報を取得
const textContent = await page.getTextContent();

// 各アイテムには{x, y, str, dir}などの情報が含まれる
textContent.items.forEach(item => {
  console.log(`${item.str} at (${item.transform[4]}, ${item.transform[5]})`);
});

💡 強み: pdfjs-distはテキストの位置情報まで取得できるため、ハイライトや注釈の実装に使えます。ただし、バンドルサイズが大きいため、表示不要なら使わない方が賢明です。

🧩 実際のユースケースでの組み合わせ

多くのアプリでは、これらのライブラリを組み合わせて使います。

ケース1: 契約書の自動生成 → 表示 → 署名

1. pdf-libでテンプレートにユーザー情報を埋め込む
2. 生成されたPDFをpdfjs-distで表示
3. ユーザーが署名欄に描画（Canvas）
4. 再度pdf-libで署名画像をPDFに合成

ケース2: PDFアップロード → テキスト抽出 → 検索インデックス作成

• バックエンドでpdf-parseを使用してテキストを抽出
• 抽出テキストをElasticsearchに登録
• フロントエンドではpdfjs-distで元のPDFを表示

📊 機能比較表

💡 選定のポイント

• 「PDFを作る・編集する」必要がある？ → pdf-lib
• 「PDFの中身をテキストで読みたい」だけ？ → バックエンドならpdf-parse、フロントエンドならpdfjs-dist
• 「PDFを画面に表示したい」？ → pdfjs-dist一択

誤解しやすい点として、「テキスト抽出＝pdf-parse」と思いがちですが、ブラウザ環境ではpdf-parseは使えません。その場合はpdfjs-distのgetTextContent()を使う必要があります。

最後に：これらのライブラリは競合ではなく補完関係です。要件に応じて適切に組み合わせることで、堅牢なPDFワークフローを構築できます。