pdfをダウンロードせずブラウザで表示したい

Question

laravel(lumen)とReactを使い開発をしています。以下のコードでpdfをダウンロードするまではできました。

axios.get(***).then(response => {
  const url = URL.createObjectURL(new Blob([response.data]),{type: 'application/pdf'})
  const a = document.createElement('a')
  a.href = url
  a.download = 'hoge.pdf'
})

pdfをダウンロードせずlinkをクリックしてブラウザ上でpdfを表示させたいです。以下のように書くとページ遷移はできましたがpdfではなくただの文字列がブラウザ上に表示されます。

axios.get(***).then(response => {
  const url = URL.createObjectURL(new Blob([response.data]),{type: 'application/pdf']})
  const a = document.createElement('a')
  a.href = url
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
})

pdfをダウンロードせず表示させることは可能なのでしょうか？もし可能なのであればどのように実装すればよろしいでしょうか？
よろしくお願いいたします。

Comments

[hoshi-takanori]

axios を使わずに、普通の a タグで pdf ドキュメントへのリンクにすれば良いのでは。

[hello_space]

ご回答ありがとうございます。
pdfドキュメントはアプリケーション内のフォルダに保存しておきそこにリンクを貼る必要があるということでしょうか？

現状axiosでphpにrequestを送りphp側でhtmlをpdfとして返すという処理をしています。

[hoshi-takanori]

pdf が静的なファイルか、php で動的に作ったものかは、ブラウザには関係ありません。get メソッドで取得できるなら、どちらでも a タグでいけますよ。

[hello_space]

ありがとうございます！！
できました！
方法としてはおっしゃられたようにaxiosを使わずaタグを生成してそこにリンクを貼りました。
a.href = '<axiosで送っていたURL>?id=' + id(変数)
ベストアンサーに選びたいので回答していただくことは可能でしょうか？
ちなみになぜaxiosだとできなかったのでしょう？それともURL.createObjectURLがいけなかったのでしょうか？

[hello_space]

すみません。なんとなくわかりました。axiosだとrequestを送るだけ、aタグだとrequestも送り、かつ遷移もできるという感じでしょうか？

Answer 1

PDF をどのように表示したいかによりますが、現在のページの中に埋め込みたいとかではなく、普通に PDF に遷移したいのであれば、a タグで pdf のドキュメント (静的ファイルでも、動的コンテンツでも、ブラウザにとっては関係ありません) にリンクを張ればいいと思います。

なお、a タグの場合は新しいページに遷移することになりますが、axios で取得すると現在のページのままデータとして取得することになります。URL.createObjectURL で表示する (そんなこと考えたこともなかったけど) 場合は、responseType に arraybuffer を指定する必要があるようですね。
参考: javascript - Creating PDF from request response doesn't work with axios but works in native xhr - Stack Overflow

Comments

[hello_space]

なるほど！axiosについての理解も曖昧でした。リンク先もありがとうございます！確認してみます。