Closed3

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

nac-39nac-39

前提条件

  • Node v18.16.0
  • Nuxt 3.0.0

要件

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

nac-39nac-39

@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);
このスクラップは6ヶ月前にクローズされました