PDFの表示方法の変更

Question

前提・実現したいこと

ページにＰＤＦを埋め込んで表示させる形式を作っております。
従来、ブラウザではシンプルなPDF表示になっておりますが、GoogleChromeの最新版では表示方法によって、見づらいものになってしまうようです。（PDFの左側に各ページのプレビューが表示されるようになりました。）

今回、PDFの表示について変えて見やすいものにしたいと考え、
以下のようにできないかと考えております。

・以前までのGoogleChromeのようにプレビューが表示されない
・ファイルのダウンロードが可能である
・画面の拡大・縮小が可能

正直、今までにこういったことをしてきていないので何の言語を使用したらいいかなどもわかりません。いろいろ検索した結果、CSSを使用するとでき得るということが分かったため、また、今までに使用してきたHTMLやJavaScriptを使用してできないかと思っています。

補足

検索の過程で出てきたPDF.jsを活用したいと考えています。また、このブログでPDF.jsについて説明されており、具体例が紹介されているので、同じものにしたいのですが、ソースコードを見て真似してもなぜか上手くいきません。

###エラーについて

Access to XMLHttpRequest at '～/mozilla.github.io/web/locale/locale.properties' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
getL10nData @ viewer.js:14134
viewer.js:13755 ～/mozilla.github.io/web/locale/locale.properties not found.
(anonymous) @ viewer.js:13755
viewer.js:13756 "ja-jp" resource not found
(anonymous) @ viewer.js:13756
locale/locale.properties:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-viewThumbnail.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-viewThumbnail.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-viewOutline.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-viewOutline.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-viewAttachments.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-viewAttachments.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-viewLayers.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-viewLayers.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-sidebarToggle.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-sidebarToggle.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-search.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-search.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-pageUp.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-pageUp.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-pageDown.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-pageDown.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-presentationMode.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-presentationMode.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-openFile.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-openFile.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-print.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-print.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-download.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-download.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-bookmark.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-bookmark.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-secondaryToolbarToggle.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-secondaryToolbarToggle.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-zoomOut.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-zoomOut.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-zoomIn.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-zoomIn.svg:1 Failed to load resource: net::ERR_FAILED
viewer.html:1 Access to image at '～/mozilla.github.io/web/images/toolbarButton-menuArrow.svg' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
toolbarButton-menuArrow.svg:1 Failed to load resource: net::ERR_FAILED
pdf.worker.js:16 Uncaught SyntaxError: Cannot use import statement outside a module
viewer.js:14134 #loading_error is undefined.
getL10nData @ viewer.js:14134
viewer.js:14134 #error_version_info is undefined.
getL10nData @ viewer.js:14134
viewer.js:14134 #error_message is undefined.
getL10nData @ viewer.js:14134
pdf.js:2865 Uncaught (in promise) Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".
at pdf.js:2865
DevTools failed to load SourceMap: Could not load content for ～/mozilla.github.io/build/pdf.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load SourceMap: Could not load content for ～/mozilla.github.io/web/viewer.js.map: System error: net::ERR_FILE_NOT_FOUND

Comments

[m.ts10806]

質問は結局何なのでしょうか。
>検索の過程で出てきたPDF.jsを活用したいと考えています。
では、使ってみれば良いのでは。

[Ito_Kazuki_]

すみません。質問ができていなかったようなので、修正しました。
今回、PDF.jsを使用して作成しようとしたのですが、githubのソースコードを使用してもうまくいかず、上記リンクのブログにて紹介されている具体例が日本語化されているものだったのでこちらを真似しようとしてもできませんでした。

[m.ts10806]

エラーだけではなく、ご自身が手元で動かしているコードも提示されたほうが良いです

[Ito_Kazuki_]

手元のコードは紹介されているページそのままです。ローカルにファイルをおいているため、ことなるサーバーにあるファイルに直接アクセスできないものが原因かもしれないのですが、自分ではわかりません。

なお、文字数の関係でコードは直接記載できませんでした。

[Lhankor_Mhy]

Chromeで普通にPDFを表示して試してみたところ、以下のことは実現できているようでした。
・ファイルのダウンロードが可能である
・画面の拡大・縮小が可能

[Ito_Kazuki_]

Lhankor_Mhyさん
端末によりプレビューが表示されるので、プレビューの表示をできないようにしたいのです。

[Lhankor_Mhy]

では、2番目と3番目の条件は無視してかまいませんか？

[Ito_Kazuki_]

Google ChromeのPDFviewerの機能のうち、プレビュー機能のみを外したものが一番いいのですが、難しいようであれば２・３番目の条件（DL機能・拡大／縮小機能）は無くても構いません。

[Lhankor_Mhy]

問題を把握しました。

[Lhankor_Mhy]

何度か試してみましたが、同じエラーメッセージが再現しませんでした。
'～/mozilla.github.io/web/images/toolbarButton-viewThumbnail.svg'
↑この「～」は元のエラーメッセージそのままでしょうか？

[Ito_Kazuki_]

‘’内がファイルの絶対パスです。
作業をサーバーには上げずにローカルでやっています。
〜にはユーザー名などが含まれるため省略しています。

[Lhankor_Mhy]

file://で始まるパスですか？
そうであれば、動かないですよ。

[Ito_Kazuki_]

file://で始まります。
初歩的なことが分かっていないのかもしれません。動かないのはなぜでしょうか。

[Lhankor_Mhy]

ドキュメントにそう書いてあります。

> Finally, you need to start a local web server as some browsers do not allow opening PDF files using a file:// URL.
https://github.com/mozilla/pdf.js#getting-the-code

[Lhankor_Mhy]

ご解決されましたでしょうか？

回答をいたしましたが、なにか不明な点がありますか？

Answer 1

Finally, you need to start a local web server as some browsers do not allow opening PDF files using a file:// URL.

mozilla/pdf.js: PDF Reader in JavaScript

とのことなので、ローカルサーバを立てて実行してみてください。

Comments

[Lhankor_Mhy]

難しいでしょうか？

ローカルサーバの立て方がわからないのであれば、こういう機能拡張を使ってみるのもいいと思いますよ。
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/reviews