Flaskのmake_responseでPDFのページ指定の仕方

Question

前提・実現したいこと

FlaskでPDFをダウンロードさせる際に、指定したページをブラウザで開くようにしたいと思っています。

発生している問題・エラーメッセージ

ページ指定のやり方がわからない。

該当のソースコード

res = make_response(file_data)
res.headers["Contant-Disposition"] = "inline"
res.mimetype = "attachment;"
return res

試したこと

URLで指定する場合は「#page=num」で実現できると思いますが、
上記のコードの場合、何を指定すればページ指定で開くようになるのか
ご教授いただけると助かります。

補足情報（FW/ツールのバージョンなど）

Python3.9
Flask1.1.2

Answer 1

下記のやり方で実現できました。

const request = new XMLHttpRequest();
request.page = page_num; // 開きたいページ番号
request.open("GET", url, true);
request.onload = function() {
  const blob_res = new Blob([this.response], {type:"application/pdf"});
  const pdf_url  = window.URL.createObjectURL(blob_res) + "#page=" + this.page;
  window.open(pdf_url);
};
request.send("");

Answer 2

urlを定義する場合は、他のエンドポイントと同じように、@app.routeを指定ください。

@app.route('/download')

ファイルをダウンロードさせる場合、以下Qiitaの記事が完結にまとまっていて分かりやすいです。
Flaskでファイルダウンロードを実現する３つの方法

/downloadを開くリンクを作成したいとかそういう意味の場合は、<a>要素でリンクを書いたり、JavaScriptをボタンに紐付けてpostやらgetやらをするコードを書いたりしてください。

Comments

[cando]

ご回答ありがとうございます。
ダウンロード自体は出来ているのですが、
ダウンロードしたPDFをブラウザ上で『ページ指定』で開くことができません。
PDFのファイル自体はDBに入っているので、URLで直接指定することは出来ません。
何か他に解決方法がございましたら、ご教授いただけると助かります。

[FiroProchainezo]

すみません、意味が分からないのですが、
ブラウザ上で「ページ指定」とは、なんというブラウザをどのような操作した場合の動作でしょうか？

DBから値を取得し、pdfにまとめ、レスポンスを返すエンドポイント(@route)を作成してもそこにアクセスできないということでしょうか？

[cando]

説明が悪く、申し訳ありません。
例えば公開されているPDFにブラウザで下記のような形でアクセスできると思います。
www.test.com/test.pdf
この末尾にページ情報を付加することにより、ブラウザでPDFの指定されたページを開くことができると思います。
www.test.com/test.pdf#page=10

上記を実現したいのですが、私の場合はPDFは静的ファイルとして公開していないので
URLで「#page=10」のようにPDFを直接指定することは出来ません。
そこで、ご教授していただいたURLにあるような方法でダウンロードを実現しました。
しかし、そうするとダウンロードはできるのですが、ブラウザで表示すると1ページ目が表示されてしまいます。
これを任意のページを開くように指定することはできないのか？というのが私の質問です。
説明が至らず申し訳ありません。

[FiroProchainezo]

#page=10の意味がわかりました。
https://helpx.adobe.com/jp/acrobat/kb/link-html-pdf-page-acrobat.html
↑こういうのですかね？
これの場合はAcrobatの話で、かつ、静的ファイルを対象としているように見えるので、静的ファイルとして保存し表示するような動きを作るのはいかがでしょうか？

静的ファイルとして保存しておくのはNGの場合は、以下のpdf.jsを使うと、特定のページを表示可能でした。(acrobatで開いたのとはレイアウト等異なりますが、もしかしたらカスタマイズ可能かもしれません)
https://mozilla.github.io/pdf.js/examples/

[cando]

ご回答ありがとうございます。
なるほど、pdf.jsというのがあるのですね。
問題解決の糸口になりました。
本当に困っていたので解決の糸口をご教授頂き、感謝しています。
ありがとうございました。