Vue3(Nuxt3)でPDFを表示したい

前提条件

• Node v18.16.0
• Nuxt 3.0.0

要件

アプリのバックエンドAPIからのPDFを取得すると、レスポンスがBlob型で返ってくる。それをクライアントにダウンロードさせずにプレビューできる機能が欲しい。
APIにアクセスするにはトークンが必要なので、pdf.jsを使って単にURLを指定するだけではPDFを取得することが出来ない（はず。未検証）。そのため、トークンの送受信が可能なクライアントでBlobを取得することになった。

VueでPDFをプレビューできるライブラリ

• vue-pdf: Vue2にしか対応していなさそう

  • https://qiita.com/Dai_Kentaro/items/b856fcd258a5335477b9

• @tato30/vue-pdf: Vue3に対応していそう

  • GitHub: https://github.com/TaTo30/VuePDF
  • Docs: https://tato30.github.io/VuePDF/

• pdf.js: 上の２つはこれのラッパーライブラリ

  • https://mozilla.github.io/pdf.js/

@tato30/vue-pdfでBlobのPDFを表示させる方法

@tato30/vue-pdfでは、usePDFというフックでpdfを読み込み、pdfのデータを読み込める関数が用意されている。usePDFは以下のように用いる（→Docs: Basic Usage）

const { pdf, pages, info } = usePDF('document.pdf')

引数には基本的に、PDFが存在するURLを書くようであるが、今回はURLではなく、ダウンロードしたあとのBlobかそれを変換したデータを引数に渡したい。
usePDFの引数の型

export type UsePDFSrc = string | URL | TypedArray | PDFDataRangeTransport | DocumentInitParameters;

また、この型は本家pdf.jsのsrcの型と同じである。

This parameter is the same src of pdf.js
https://tato30.github.io/VuePDF/guide/composables.html#usepdf

そのため、pdf.jsでBlobになったPDFを読み込む方法を調べれば良さそうである。

pdf.jsでBlobをビューワに渡すためのデータの変換方法

もろにこの記事が参考になりそう
https://stackoverflow.com/questions/24535799/pdf-js-and-viewer-js-pass-a-stream-or-blob-to-the-viewer

ここの中で一番実装が簡単そうなのは、次のように、URL.creageObjectURLを使う方法だった。

// resにはblobが入っている
fileURL = URL.createObjectURL(res);
const { pdf, pages, info } = usePDF(fileURL);