PDF.jsのcmap設定

 stackoverflowの記事を参考にPDF.jsを使ってウェブブラウザでpdfを表示すると、あるpdfが正常に表示されませんでした。 デベロッパーツールのコンソールには、次のようなワーニングが表示されています。

Warning: loadFont - translateFont failed: "Error: fetchBuiltInCMap: failed to fetch file "sscmaps/Adobe-Japan1-UCS2.bcmap" with "Not Found".".

このワーニングは、PDF.jsのCMAPのパスが正しく設定されていない場合に表示されるようです。PDF.jsはPrebuiltをダウンロードして次のように配置しています。

├── pdfjs/
│   ├── cmaps/ 
│   ├── locale/
│   ├── pdf.js 
│   ├── pdf.js.map
│   ├── pdf.worker.js
│   └── pdf.worker.js.map
└── index.html

この配置に合わせてpdfjsLib.getDocumentにCMAPを次のように設定します。cMapUrlに設定するパスは、pdfjs/cmaps/ではなくcmaps/が正解です。

<script src="pdfjs/pdf.js"> </script>

<script>

  const CMAP_URL = "cmaps/";
  const CMAP_PACKED = true;
        
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/pdf.worker.js';
  document.getElementById('file').onchange = function (event) {
    var file = event.target.files[0];
    var fileReader = new FileReader();
    fileReader.onload = function () {
      var typedarray = new Uint8Array(this.result);
      //const loadingTask = pdfjsLib.getDocument(typedarray);
      const loadingTask = pdfjsLib.getDocument({
        data: typedarray,
        cMapUrl: CMAP_URL,
        cMapPacked: CMAP_PACKED,
      });
      loadingTask.promise.then(pdf => {
        :

CMAPのパスを設定すると正常に日本語が表示されました。