Kq9ya
@Kq9ya

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

アップロードしたファイルをPDF.jsビューワーで開きたい

解決したいこと

アップロードしたファイルをPDF.jsビューワーで開きたいです。

Flask、Python、htmlを使ってユーザーがアップロードしたファイルをPDF.jsで開くWebアプリをつくっています。
機能の実装中にエラーが発生しました。
プログラムを書くこと自体に慣れておらず、ChatGPTを活用しながら作っています。そのため優しく教えてくださると助かります。
解決方法を教えて下さい。

発生している問題・エラー

127.0.0.1 - - [15/Nov/2024 19:10:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [15/Nov/2024 19:10:41] "POST /upload HTTP/1.1" 200 -
127.0.0.1 - - [15/Nov/2024 19:10:41] "GET /web/viewer.html?file=test1.pdf HTTP/1.1" 304 -
127.0.0.1 - - [15/Nov/2024 19:10:41] "GET /build/pdf.js HTTP/1.1" 404 -
127.0.0.1 - - [15/Nov/2024 19:10:41] "GET /web/viewer.css HTTP/1.1" 304 -

ファイルのアップロードはうまくいっています。
PDF.jsのビルドで問題が起きているみたいです。

該当するソースコード

@app.route('/web/<path:filename>')  
def serve_file(filename):  
    return send_from_directory('web', filename) 

Webディレクトリにtest1.pdfファイルが入っています

    <iframe title="pdfjs-default-viewer" 
    src="{{ url_for('serve_file', filename='viewer.html') }}?file={{ url_for('serve_file', filename='test1.pdf') }}" 
    width="400px" 
    height="500px">
    </iframe>

自分で試したこと

VScodeで書いているのですが、LiveServerを使用して、
パスをsrc="../web/viewer.html?file=test2.pdf"にしているとちゃんとビューワーが表示されます。

しかしPythonを通して、src="{{ url_for('serve_file', filename='viewer.html') }}?file={{ url_for('serve_file', filename='test1.pdf') }}"
のパスを使ってアップロードしたファイルを開こうとするとビルドエラーが起きます。
ビューワーの形だけはページで表示されるのですが、中身のPDFは表示されません。
このパスの指定の仕方が間違っているのでしょうが、どうもわかりません。
元々できないことをしようとしているのでしょうか?

0

2Answer

基本的にやりたいことは、web サーバーのフォルダにアップロードした pdf ファイルを、クライアント(ブラウザ)から呼び出して、ブラウザの画面に表示したいということですか?

であれば、iframe を使っているようですが、PDF.js ビューワーは一旦忘れて、iframe の src 属性に web サーバーのフォルダにある pdf ファイルの url を設定したら表示されるのでしょうか?

それができないのであれば、ブラウザのアドレスバーに pdf ファイルの url を直接入力して要求したらブラウザの画面に pdf ファイルは表示されますか?

0Like

"GET /build/pdf.js HTTP/1.1" 404 - エラーが出ていることから、パス /build/pdf.js にマッチする route が定義されていないか、 route はあってもローカルに ./build/pdf.js ファイルが存在しないまたは読み込みに失敗していることが考えられます。 route の定義とファイルの存在を確認してください。

(追記: src="../web/viewer.html?file=test2.pdf" で表示できているということは viewer.html の内容は正しそう(ログに /web/viewer.mjs が出ていないのはログの一部分を貼ったから?)ですね。これ以降の文章は前提を間違えた回答なので読み飛ばしてください。参考のために残しておきます。)

次に、 viewer.html の内容が間違っていそうです。アプリを作るにあたって何かの資料を参考にされたのか、 ChatGPT が吐き出したのか分かりませんが、ファイル名から推測するに、 PDF.js の配布物に含まれる ./web/viewer.html を使う想定のコードになっているはずです。本来このファイルは script タグで ./web/viewer.mjs を読み込み、そのスクリプトが PDF.js を呼び出して描画を指示するようになっています。

しかし、サーバのログに /web/viewer.mjs へのリクエストが記録されていないことから、 viewer.html の内容が本来のものとは異なっていることが考えられます。 web ディレクトリに元々の viewer.html と viewer.mjs を置いてください。なければ https://mozilla.github.io/pdf.js/getting_started/#download からダウンロードし直せます。

0Like

Your answer might help someone💌