PDF.jsを使用してPDFをスライドショーのように表示したい

前提

環境
ASP.NETMVC
VisualStudio2015
c#
PDF.js v2.0.943

ブラウザ
IE11
chrome

以上の環境でWEBシステムを作成しています。

実現したいこと

あるページに、サーバー上にあるPDFを表示させたい。そのときに、
「次へ」「戻る」ボタンとPDFの「現在ページ値」「総ページ値」配置してスライドショーのようにしたい。

試したこと

・色々ネットで調べたところ、PDF.jsが使えそうか試してみる。
・VisualStudioのNuGetパッケージマネージャーから、PDF.js v2.0.943をScriptsフォルダにインストール。
PDF.jsフォルダとファイルが追加。
・まずはhttps://mozilla.github.io/pdf.js/examples/ の「Previous/Next example」を参考に、
表示したいcshtml(view/test/index.cshtml)に以下のように追加しました。

html
1<script src="/Scripts/pdf.js/build/pdf.js"></script>
2
3<h1>PDF.js Previous/Next example</h1>
4
5<div>
6  <button id="prev">Previous</button>
7  <button id="next">Next</button>
8  &nbsp; &nbsp;
9  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
10</div>
11
12<canvas id="the-canvas"></canvas>

javascript
1
2<script>
3    // If absolute URL from the remote server is provided, configure the CORS
4    // header on that server.
5    var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
6
7    // Loaded via <script> tag, create shortcut to access PDF.js exports.
8    var pdfjsLib = window['pdfjs-dist/build/pdf'];
9
10    // The workerSrc property shall be specified.
11    pdfjsLib.GlobalWorkerOptions.workerSrc = '/Scripts/pdf.js/build/pdf.worker.js';
12
13    var pdfDoc = null,
14        pageNum = 1,
15        pageRendering = false,
16        pageNumPending = null,
17        scale = 0.8,
18        canvas = document.getElementById('the-canvas'),
19        ctx = canvas.getContext('2d');
20
21以下省略
22
23</script>

発生している問題

上記を追加したcshtmlを表示したところ、

0x800a138f - JavaScript 実行時エラー: 未定義または NULL 参照のプロパティ 'GlobalWorkerOptions' は取得できません

が表示されてしまいました。エラーが起きたところは、

pdfjsLib.GlobalWorkerOptions.workerSrc = '/Scripts/pdf.js/build/pdf.worker.js';

ここになります。

教えていただきたいこと

・「発生している問題」で記述した内容を解決したいです。なにか足りないファイルがある、
必要な作業がありそうなのですがそれが分かりません。

ちなみに、/Scripts/pdf.js/　の直下に新規でtest.htmlを作成して「試したこと」で記述した内容をそのまま使ったところ、
エラーは起きませんでしたが、PDFの内容は表示されず(canvasタグ)真っ白になってしまいましたが、
ボタンの「Previous」「Next」と現在ページ値」「総ページ値」は表示され、「Next」を押すとカウントアップしました。

よろしくお願いします。

退会済みユーザー

2019/01/31 09:12 編集

ASP.NET には直接の関係はない PDF.js と JavaScript, HTML の話のように思えますが、であれば ASP.NET のタグは外していただくようお願いします。C# も MVC も関係なさそうです。

wwbQzhMkhhgEmhU

2019/02/01 17:32

blazerみたいなのもありますし、環境はなるべく細かく書いてくれた方が嬉しいです。読み飛ばせばいいだけですしね。

wwbQzhMkhhgEmhU

2019/02/01 18:00

/Scripts/pdf.js/build/pdf.jsはちゃんと読めてますか？ブラウザの開発用ツールで確認してください。

asr1919

2019/02/06 07:55

wwbQzhMkhhgEmhUさん返信送れて申し訳ございません。ブラウザでF12キーから、/Scripts/pdf.js/build/pdf.jsをコピーして、新規タブで貼り付けた(http://localhost/Scripts/pdf.js/build/pdf.worker.js)ところ、表示されたので読めていると思います。

wwbQzhMkhhgEmhU

2019/02/07 14:05

エラーが起きたところを実行したときに、/Scripts/pdf.js/build/pdf.jsが読まれているかどうかです。デバッガで止めて確認してください。あなたが言っていることだけでは、分かりません。

wwbQzhMkhhgEmhU

2019/02/07 17:39

ちょっと今古いPCを借りたLiveUSBのLinuxしかないので、あんまり確認できないのですが、.net core 2.2上で動かしてみました。この環境だからか分かりませんが、dotnet add packageでpdfjsの2.0.943を入れても、実ファイルベースでは何も入りませんでした。仕方なく、nugetパッケージファイルをそのまま展開して、Content/Scriptsをwwwrootの下に手でコピーして、インストール完了としました。 exampleの実装を入れる際は、cshtmlにそのままscript要素で埋め込み、適宜pdfやjsのパスをローカルサーバに書き換えた(pdfは自分で用意)ところ、読み込めることまでは確認しました。当然先にpdf.jsが読まれるように書いています。ただviewportの取得時、scaleの渡し方が合っていなくて、表示はできていませんでした。 {scale:scale}のようになっているところを、ただのscaleにすれば表示もできるようです。なお、linuxなので、.netではなく、.net coreで、ブラウザもIEではなく、firefoxです。以上、情報まで。