PDF.jsでPDFを全角表示したいのだ！
ブラウザで、PDFをダウンロードせずに表示ってことで、今回PDF.jsを使用しました。
ところが・・・・この資料が、また少ない(^^;
とくに、せっかく表示したとしたのに、全角が表示されない。。。
正確に表現すると、表示するときと表示しないときが。。。。
表示しない時の状態をChromeのデベロッパーツールで見ると”Adobe-Japan1-UCS2.bcmapが見つからない”とのメッセージが。。
これを頼りに検索をしてみると、”cmapsの設定が必要”とのことが。。
なんか、PDF.jsを使うとき必ず引っかかることらしい。。。なんじゃそりゃ(^^;
ってことで設定をしてみました。
■cmaps環境を設定しましょう
ダウンロードはこちらから
ダウンロードしたzipファイルを展開するとこんな感じに展開されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
├── build/ │ ├── pdf.js - display layer │ ├── pdf.js.map - display layer's source map │ ├── pdf.worker.js - core layer │ └── pdf.worker.js.map - core layer's source map ├── web/ │ ├── cmaps/ - character maps (required by core) │ ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes │ ├── debugger.js - helpful debugging features │ ├── images/ - images for the viewer and annotation icons │ ├── locale/ - translation files │ ├── viewer.css - viewer style sheet │ ├── viewer.html - viewer layout │ ├── viewer.js - viewer layer │ └── viewer.js.map - viewer layer's source map └── LICENSE |
この中のcmapsをpdf.jsが配置されているディレクトリにコピーします。
この例ではbuildディレクトリ配下ですね。。
それをこんな感じに呼び出します（今回の環境では、DocRoot/pdfjs-dist/build/pdf.jsって配置しています）。
※今回はBase64でデータを取ってきて表示をするため、dataに変数を設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
pdfjsLib.getDocument({ data : wB64, cMapUrl : '/pdfjs-dist/build/cmaps/', cMapPacked : true }).promise.then((pdf) => { state.pdf = pdf; state.pdf.getPage(state.currentPage).then(function(page) { var canvas = document.getElementById("the-canvas"); var ctx = canvas.getContext('2d'); // 倍率を指定 var viewport = page.getViewport({scale: state.zoom}); canvas.width = viewport.width; canvas.height = viewport.height; // レンダリング page.render({ canvasContext: ctx, viewport: viewport }); }); }); |
cMapUrlとcMapPackedを設定してください。
なんてことは、ドキュメントでは出会いませんでした。。。
どっかにあるのかもしれませんが。。。
■ここでハマったことが。。。
サンプルでmozillaからのCDN設定で書かれています。
<script src=”//mozilla.github.io/pdf.js/build/pdf.js”></script>
pdfjsLib.GlobalWorkerOptions.workerSrc = ‘//mozilla.github.io/pdf.js/build/pdf.worker.js’;
最初はこの設定でやっていました。
ところが、/cmaps/をどこに配置をしてもフォントを認識してくれませんでした。
で、pdf.jsをサーバーにインストールしたら、即認識してくれました。。はぁ。。。
■あとがき。。。
まぁなんというか、アッチャコッチャ調べ倒しました。
“フォント使うにはcMapUrlとcMapPackedを書くんだよ”ッテ記載はあるんですが、んじゃ具体的にはどう書くのか書かれていないってのが多かった印象です(^^;
