nuxt vue-pdf利用方法

前提条件

• nuxtのアプリケーションを利用
• 画面上にpdfデータをプレビュー表示したい
• APIからはPDFのblobデータが返ってくる

手順

1. ライブラリインストール
2. 実装

1. ライブラリインストール

$ yarn add vue-pdf@4.2.0
$ yarn add pdfjs-dist@2.7.570

最新のバージョンをインストールするとエラーになるためバージョン指定でインストール
バージョンは以下のisuuesを参考にしました
https://github.com/FranckFreiburger/vue-pdf/issues/338
https://github.com/FranckFreiburger/vue-pdf/issues/315

2. 実装

<template>
  <div>
    {{ currentPage }} / {{ pageCount }}
    <pdf
      :src="src"
      @num-pages="pageCount = $event"
      @page-loaded="currentPage = $event"
      :page="currentPage"
    />
  <//div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      src: null,
      pageCount: 0,
      currentPage: 1,
    }
  },
  mounted() {
    // blobにはAPIからとってきたPDFのblobデータが入っている想定
    const arrayBuffer = await blob.arrayBuffer()
    const typedArray = new Uint8Array(arrayBuffer)

    this.src = pdf.createLoadingTask({
      data: typedArray,
      cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.7.570/cmaps/',
      cMapPacked: true,
    })
  }
}
</script>