Zenn
Open5

[2024年] React/TypeScript プロジェクトで使える PDF 読み取りライブラリの調査

tenkeitenkei

そもそもの話の発端。

メジャーどころの PDF.js を使おうとしてみたら、まさかの苦戦。
以下のエラーに遭遇。

import * as pdfjsLib from "pdfjs-dist/build" issues. #17622 - github.com

そもそも PDF.js ではなく pdfjs-dist を使う必要があったり、以下のようなインターフェイスになっていたり、微妙さを感じた。

const loadingTask = pdfjsLib.getDocument(pdfData);
const pdf = await loadingTask.promise; // ← promise property?!

そのため、ライブラリ比較からスタート。

tenkeitenkei

ひとまず ｢js pdf library｣ みたいな感じでググる。

PDFKit, pdfmake, jsPDF, PDF-LIB, pdfme
このあたりを見れば良さそう。

※課金が必要なSaaSツールは除く。
※react-pdf のような React ラッパーは除く。PureなJavaScriptライブラリが望ましい。

参考程度に、npm trends。

https://npmtrends.com/@pdfme/generator-vs-jspdf-vs-pdf-lib-vs-pdfkit-vs-pdfmake

tenkeitenkei

各PDFライブラリを軽く見てみた。
PDFKit, pdfmake, jsPDF, pdfme の4つは PDF 生成を目的としたライブラリっぽい。
機能の充実度やドキュメントの見やすさに差はあれど、どれもそれなり以上のクオリティ。

自分の今回のニーズとしては、既存のPDFの情報（総ページ数など）を取得したい。
なので、 PDF-LIB 一択となりそう。（もちろんPDF生成もできる）

There are other good open source JavaScript PDF libraries available. However, most of them can only create documents, they cannot modify existing ones. And many of them only work in particular environments.

https://github.com/Hopding/pdf-lib?tab=readme-ov-file#motivation

と言っている。

PDF-LIBの良いところ。

  • TypeScriptで書かれており、型定義が同梱されている
  • ブラウザとNode.jsはもちろん、DenoとReactNativeにも対応している
  • ドキュメントが見やすい

PDF-LIBの懸念点。

  • 最終コミットが3年前（まぁでもPDFは枯れた技術だし、大きな懸念点ではない…と思う）
tenkeitenkei

PDF-LIB を使ってPDFファイルの総ページ数を取得するコードを書いてみた。

import { PDFDocument } from 'pdf-lib';

const file: File = // どこかから読み込んだPDFファイル

const pdfDoc = await PDFDocument.load(await file.arrayBuffer());
console.log(`ページ数: ${pdfDoc.getPages().length}`);

シンプルで書きやすいインターフェイス。良い感じ。