Kq9ya
@Kq9ya

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

アップロードしたファイルを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

Comments

  1. 【追記】

    PDF.js v4.8.69 (現時点での最新版) を入手して、Windows 10 PC の VS Code v1.95.3 を使って、以下の様なディレクトリ構造及び、html で試してみました。

    VSCode.jpg

    結果、期待通り表示されます。

    result.jpg

    Fiddler で見た要求応答は以下のようになります。

    fiddler5.jpg

    #5 で iframe の src 属性に設定した web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf が呼ばれると、その応答として返ってくる html ソースに含まれる、

    <script src="../build/pdf.mjs" type="module"></script>
    <link rel="stylesheet" href="viewer.css">
    <script src="viewer.mjs" type="module"></script>
    

    によってダウンロードされる JavaScript が動いて Viewer が作られ、#35 で pdf ファイルがダウンロードされて Viewer に表示されるということのようです。

    ・・・が、質問者さんのケースで build/pdf.js が 404 Not Found になって動かないという理由は分かりません。

    サイトのディレクトリの階層構造が上の画像のようになっていない(iframe のあるページのフォルダと build, web フォルダの階層が違う?)ということはないですか?

    test1.pdf という名前のファイルは Web フォルダにありますか? test2.pdf はあるようですが。

    最新版 v4.8.69 のスクリプトファイルの拡張子は ,js ではなくて .mjs ですが、そのあたりの違いはどうなんでしょう?

    Web サーバーによっては MIME マッピングに無いファイルはダウンロードされないことがありますが(IIS は .mjs は MIME マッピングに含みません。なので、404 Not Found になります)、質問に書いてあった「Pythonを通して」の Web サーバーの場合はそういうことはありませんか?

  2. @Kq9ya

    Questioner

    丁寧な返信ありがとうございます。
    Pythonを通さず、HTMLだけで動かすテストをしたときにはPDF.js最新版だとうまく動きませんでした。そのため参考にした記事で使っていたバージョンと同じものにして拡張子が.mjsではなく.jsになっています。

    ディレクトリ構成は以下の通りです。
    スクリーンショット (19).png
    Pythonを通して実行すると、
    スクリーンショット (21).png
    このような画面で、ビューワーの型は生成されているがpdfまでたどり着いていないような見た目です。
    パスが
    src="{{ url_for('serve_file', filename='viewer.html') }}?file={{ url_for('serve_file', filename='test1.pdf') }}"
    この文のviewer.htmlまでは通っているのですが、そのあとがよくないように感じています。
    src="{{ url_for('serve_file', filename='viewer.html') }}?file=test1.pdf"
    にしたりしてみましたがうまくいきませんでした。

  3. iframe のある html ファイルはどれですか?

    Pythonを通さず/通しての違いを具体的に説明してください。

    ブラウザのキャッシュを完全に削除してから試したらどうなりますか?

    HTMLだけで動かすテストをしたときにはPDF.js最新版だとうまく動きませんでした。そのため参考にした記事で使っていたバージョンと同じものにして拡張子が.mjsではなく.jsになっています。

    上に書いた通り最新版で全く何の問題もなく動きます。古いバージョンを使われたのではこちらはフォローできません。最新版を使って上の回答通りにして動くようにしていただけませんか?

    そこから話を始めるのが、少なくとも自分にとっては解決策を見つけるのに一番容易だと思いますので。

  4. @Kq9ya

    Questioner

    最新版のバージョンでの動作確認できました。
    iflameのあるhtmlファイルはtemplatesフォルダにあるindex.htmlです。
    flaskで使用するためにtemplatesフォルダにあります。
    Pythonを通す、通さないはflaskライブラリのrender_templateを使ってHTMLを描画(?)するかしないかです。

    キャッシュを削除して実行した場合は以下のようになりました。

    (PaAna) PS C:\Users\kaguya\pdfview> & C:/Users/kaguya/anaconda3/envs/PaAna/python.exe c:/Users/kaguya/pdfview/app.py       
     * Serving Flask app 'app'
     * Debug mode: on
    WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
     * Running on http://127.0.0.1:5000
    Press CTRL+C to quit
     * Restarting with stat
     * Debugger is active!
     * Debugger PIN: 120-978-856
    127.0.0.1 - - [17/Nov/2024 02:41:04] "GET / HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "POST /upload HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/viewer.html?file=/files/test1.pdf HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /build/pdf.mjs HTTP/1.1" 404 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/viewer.mjs HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/viewer.css HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-viewThumbnail.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-viewOutline.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-viewAttachments.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-sidebarToggle.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-search.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-viewLayers.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-zoomIn.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-zoomOut.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-editorStamp.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-secondaryToolbarToggle.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-editorFreeText.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-editorInk.svg HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/images/toolbarButton-editorHighlight.svg HTTP/1.1" 200 -
    
  5. iflameのあるhtmlファイルはtemplatesフォルダにあるindex.htmlです。

    上のコメントに書いてあった、

    127.0.0.1 - - [17/Nov/2024 02:41:04] "GET / HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "POST /upload HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/viewer.html?file=/files/test1.pdf HTTP/1.1" 200 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /build/pdf.mjs HTTP/1.1" 404 -
    127.0.0.1 - - [17/Nov/2024 02:41:13] "GET /files/viewer.mjs HTTP/1.1" 200 -
    

    の 1 行目が index.html のようですが、2 行目に upload へのポストが出ています。

    そのあたりがどうなっているのか分かりませんが、想像を膨らませると、index ページから fetch など JavaScript を使って upload に pdf ファイルをアップロードし、アップロードに成功したという応答を待って、iframe の src に url を設定したというようなことでしょうか?

    そして、その結果 3 行目の要求が出て、応答の html に含まれる <script src="../build/pdf.mjs" type="module"></script> で 4 行目で http://127.0.0.1:5500/build/pdf.mjs と正しい url に要求が出ているように見えます。

    viewer.html, pdf.mjs いずれも静的リソースで、上の 3 行目以降は Flask は関わってないですよね? (Flask によるルーティングとかの影響はないですよね?)

    追記: Flask の場合、静的ファイルは static フォルダに入れるという記事を目にしましたが、viewer.html や viewer.mjs は取得できているようなので今回のケースではそれは関係ないですよね?

    上の回答に書いた .mjs の MIME マッピングの件も、viewer.mjs が返ってきているのであれば関係ないでしょうし。

    ということで、私が想像できる 404 応答の原因は build フォルダに pdf.mjs が存在しないということ以外にはありません。

    pdf.mjs は存在するということであれば、原因は私の想像を超えたところにありそうで、問題を再現できる環境がない自分には分からないです。

  6. 他の回答で書きましたが、 app.py に /build/pdf.mjs と一致する route が存在しないせいで404になっています。以下のように route を追加してください。

    @app.route('/build/<path:filename>')  
    def serve_build_file(filename):  
        return send_from_directory('build', filename) 
    
  7. 先の私のコメントで、

    viewer.html, pdf.mjs いずれも静的リソースで、上の 3 行目以降は Flask は関わってないですよね? (Flask によるルーティングとかの影響はないですよね?)

    と書きましたが、そうではなくて、静的ファイルの扱いも Flask が関わっていて、その下に書いた、

    追記: Flask の場合、静的ファイルは static フォルダに入れるという記事を目にしましたが、

    が普通に行われる方法で、そうすればデフォルトで設定済みのルーティングがよしなに計らってくれるということのようです。

    static フォルダに入れない場合は @uasi さんが上のコメントで書かれたように、自分でルーティングを定義するということのようです。ws フォルダの静的ファイルの方はそのような設定をしたのでは?

    「flask static routing」などをキーワードにググるとそのあたりの記事がいろいろヒットします。例えば:

  8. Visual Studio 2022 で Flask が動くようにして試してみました。

    PDF.js のサイトからダウンロードした build と web はフォルダごと static フォルダ下にコピーし、index.html に配置した iframe の src 属性には static を追加し、

    visualstudio.jpg

    実行すると開発サーバーが立ち上がって以下のように build/pdf.mjs の要求は 404 にはならず、応答は返ってきますが、途中で止まってしまいます。

    DevServer.jpg

    ブラウザの Console を見ると以下の様に JavaScript ファイルなのにサーバーが text/plain という MIME type を返したのでロードできないと言ってます。途中で止まってしまうのはたぶんこのせいでしょう。

    PDFjs.jpg

    念のため Fiddler で見てみるとエラーメッセージの通り Content-Type: text/plain になってます。

    fiddler.jpg

    たぶん、質問者さんが使っている Flask 開発サーバーも同様ではないかと思いますが (.mjs では動かなかったので .js に変えたそうですが、それが理由では?)、そうだとすると、正しい Content-Type が返ってくるようにしないと、どのようにルーティングを直してもダメだと思います。

    ちなみに、VS Code の Live Server が返すのは application/javascript; charset=UTF-8 で、ブラウザは問題なくロードできます。

  9. Flask 開発サーバーが返す Content-Type を設定する方法が以下の記事に載ってました。

    自分の環境の Windows OS の場合レジストリを読んでくるそうで、調べてみると以下の通り .mjs は text/plain になってました。

    rededit.jpg

    レジストリをいじらなくても以下の様な設定で変更可能ということが書いてあったので試してみました。

    import mimetypes
    mimetypes.add_type('application/javascript', '.mjs')
    

    結果、上の回答の構成(build と web はフォルダごと static フォルダ下に配置、iframe の src 属性に設定した url には先頭に static/ を追加)で、期待通り pdf は表示されました。

    PDFjs.jpg

    という訳で、今回の問題の原因は以下の 2 つだと思われます。(後者は質問者さんが Mac を使っているとかですと違うかもしれませんが)

    (1) Flask による静的ファイルのルーティング

    (2) Flask 開発サーバーが返す .mjs の Content-Type は text/plain となる

    解決策は今までのやり取りを見たら分かりますよね? 不明点があれば質問してください。

  10. @Kq9ya

    Questioner

    解決できました!!

    @SurFerOnWwwさん丁寧な解説、ご返信ありがとうございました。
    大変わかりやすかったです。
    @uasiさんのroutingがヒントになり問題解決に至りました。

    これで存分に開発を進められます!

  11. 質問者さんの環境では私が上に書いた

    (2) Flask 開発サーバーが返す .mjs の Content-Type は text/plain となる

    はどうだったのでしょう? 開発マシンが Windows であればその対応が必要なはずですが、どうだったのでしょう? MacOS だから問題なかったとか?

    興味があるので教えてください。

  12. @Kq9ya

    Questioner

    Windowsですが、静的ファイルのルーティングのみでうまくいきました。
    参考に載せておきます。

    127.0.0.1 - - [19/Nov/2024 23:28:46] "GET / HTTP/1.1" 200 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "POST /upload HTTP/1.1" 200 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/viewer.html?file=test2.pdf HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/viewer.html?file=test1.pdf HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/viewer.css HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/build/pdf.mjs HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/viewer.mjs HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/viewer.css HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/build/pdf.mjs HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/viewer.mjs HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/locale/locale.json HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-viewLayers.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-viewThumbnail.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-sidebarToggle.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-viewAttachments.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-viewOutline.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-search.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-editorInk.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-secondaryToolbarToggle.svg HTTP/1.1" 304 -      
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-editorFreeText.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-editorHighlight.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-zoomOut.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-zoomIn.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-editorStamp.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-viewThumbnail.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/build/pdf.worker.mjs HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-secondaryToolbarToggle.svg HTTP/1.1" 304 -      
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-editorFreeText.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-editorHighlight.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-editorInk.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-zoomOut.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-zoomIn.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-editorStamp.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/locale/locale.json HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-viewOutline.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-viewAttachments.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-viewLayers.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-sidebarToggle.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/images/toolbarButton-search.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/build/pdf.worker.mjs HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/locale/ja/viewer.ftl HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/locale/ja/viewer.ftl HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/locale/en-US/viewer.ftl HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:54] "GET /static/web/locale/en-US/viewer.ftl HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/test2.pdf HTTP/1.1" 200 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/test1.pdf HTTP/1.1" 200 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/images/loading.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/cmaps/90ms-RKSJ-H.bcmap HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/images/loading-icon.gif HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/images/loading.svg HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/cmaps/90ms-RKSJ-H.bcmap HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/images/loading-icon.gif HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/cmaps/Adobe-Japan1-UCS2.bcmap HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:28:55] "GET /static/web/cmaps/Adobe-Japan1-UCS2.bcmap HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:31:06] "GET /static/web/viewer.css HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:31:06] "GET /static/web/viewer.css HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:31:06] "GET /static/build/pdf.mjs.map HTTP/1.1" 200 -
    127.0.0.1 - - [19/Nov/2024 23:31:07] "GET /static/build/pdf.worker.mjs.map HTTP/1.1" 200 -
    127.0.0.1 - - [19/Nov/2024 23:31:07] "GET /static/build/pdf.worker.mjs.map HTTP/1.1" 304 -
    127.0.0.1 - - [19/Nov/2024 23:31:07] "GET /static/web/viewer.mjs.map HTTP/1.1" 200 -
    
  13. 304 応答が返ってきているということは、ブラウザのキャッシュから取得しているということで、それがほとんどなので、ホントに問題ないのか分かりません。同じファイルを 2 度要求しているのも変です。

    キャッシュをすべて削除してから試したらどうなりますか? 

    ブラウザは何ですか? Chrome とかメジャーなブラウザであれば Content-Type が text/plain では拡張子が .mjs のファイルはロードできないはずです。

    質問者さんの Windows OS ではレジストリの設定が .mjs には application/javascript となっているのでしょうか? Windows のバージョンは何でしょう? お手数ですが調べていただけませんか?

  14. 度々の横槍失礼しますが、 Content-Type について自分の環境の場合を書いておきます。

    Windows 11 (21H2) で、 \HKEY_CLASSES_ROOT\.mjsContent Type エントリはありませんでした1

    Python 3.11, 3.12, 3.13 で mimetypes.guess_type("./x.mjs")('text/javascript', None) を返すのを確認しました2。これは mimetypes 内蔵のデータベースを使って拡張子から推測しています。また、 Windows で該当する拡張子のレジストリに Content Type がセットされていれば、 mimetypes はその値を優先します。

    1. https://github.com/golang/go/issues/68591 のバグ報告では、同僚の間で同じ Windows 11 でも .mjs のレジストリに Content Type = "text/plain" がセットされている人とそうでない人がいるとのコメントがありました。なんらかのアプリが(サードパーティアプリをインストールしたときなどに?)レジストリを書き換えている可能性があります。

    2. Python 3.10 以前では application/javascript を返していましたが、 RFC 9239application/javascript を非推奨にしたのを反映して変更されました

  15. @uasi さん>

    情報をありがとうございます。

    Windows のレジストリに無ければ「mimetypes 内蔵のデータベースを使って拡張子から推測し」、Flask 開発サーバーは .mjs の Content-Type を text/javascript に設定するということですね。

    質問者さんは Content-Type 関係の設定を何もしていないということらしいので、上のようになったのではないかと推測しています。

    ちなみに、自分の Windows 10 22H2 ではレジストリの設定は以下の通りとなっています。

    jsReg.jpg

    mjsReg.jpg

    IIS の MIME Mapping は以下の通りです。.mjs の設定はありません。

    MimeMapping.jpg

    なので、.js ファイルの Content-Type は未だに application/javascript になります。それで問題になったという事例は聞かないので、大多数のブラウザはまだ対応しているということのようですが、早めに直した方が良さそうですね。

"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💌