pdf.jsを使って日本語ファイルを表示する

CDNのpdf.jsで日本語を含むPDFファイルを表示させるのに苦戦したのでメモ．
Prebuildのzipを展開して設置する場合も多分ほぼ同じ．

検索すると viewer.html を使うやり方はある程度出てくるけれど，pdf.js 自体を読み込んでスクリプトを書く場合の情報は見つけづらい印象．

使用バージョン: pdf.js 2.16.105

公式のExample

• Examples
  最低限．これだけだとCMAPの設定がないので日本語等は表示されない
• GitHubリポジトリのexamples
  色々ある? (あまり見てない)

基本設定

コンソールに Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified. と表示されるときは

pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@2.16.105/build/pdf.worker.js';

と書けばよい．(公式の例にもこの記述がある)

• 参考: pdfjs-2.13.216-dist.zip : pdf.jsの利用での変更箇所 – Web Service Development
  この記事で使われている PDFJS は最近のバージョンで非推奨になったらしい

日本語表示

コンソールに
Warning: loadFont - translateFont failed: "UnknownErrorException: CMapReaderFactory not initialized, see the `useWorkerFetch` parameter.".
Warning: Error during font loading: CMapReaderFactory not initialized, see the `useWorkerFetch` parameter.
と表示されて日本語が描画されないときは

const loadingTask = pdfjsLib.getDocument({
    url: 'sample.pdf',
    cMapUrl: "https://unpkg.com/pdfjs-dist@2.16.105/cmaps/",
    cMapPacked: true,
});

のように cMap を明示的に指定する．

• 参考: pdf2png example cannot render Japanese font · Issue #11900 · mozilla/pdf.js · GitHub
• 参考: [備忘録] pdf.jsで日本語が読み込めない場合はcMapを設定する必要があった - Qiita
• 参考: Pdf.jsで"The cMap url must be specified"のエラーが出たときの解決法 - Qiita

その他参考記事

• pdf.jsを使いブラウザで見られるPDFスライド表示ツールを作った
  やや古く2014年の記事．テキスト選択関係の話がある
• PDFJS のドキュメントが少なすぎる