前提条件
- nuxtのアプリケーションを利用
- 画面上にpdfデータをプレビュー表示したい
- APIからはPDFのblobデータが返ってくる
手順
- ライブラリインストール
- 実装
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>