CATEGORY

【Vue.js】vue-pdfを使ってPDFプレビューを表示する方法

開発環境

  • @vue/cli 4.5.15
  • vue@2.6.14
  • vuetify@v.2.6.6

vue-pdfとは

vue-pdfは、vueコンポーネントを使ってPDFを簡単に表示・閲覧できるようにするためのVue.js用ライブラリです。vue-pdfを使えば、たった数行でPDFのプレビューを実装できます。機能的な部分を詳しく見ていきましょう。

もし不明な点や質問、ご指摘がありましたら、記事下のフォームからコメントをお願いします。

vue-pdfで使用できる属性・イベント

属性

:srcPDFファイルのURLを指定
:pagePDFが複数ページの場合、現在のページを指定
:rotatePDFの表示向きを制御。指定値は90, 180, 270など…

イベント

@passwordPDFにパスワードがかかっている場合に、パスワードを呼び出す
@progressPDF読み込みの進捗状況を検知
@loadedPDFの読み込みが完了したタイミングで発火
@page-loaded各ページが読み込まれたタイミングで発火
@num-pagesPDFファイルの全ページ数を取得したタイミングで発火
@errorエラー発生時に発火
@link-clickedPDFファイル内の内部リンクがクリックされたときに発火

メソッド

print(dpi, pageList) PDFファイルを印刷する際に使用
・dpi: ドキュメントの印刷解像度を指定
・pageList: 印刷するページのリストを指定

ドキュメント

実装手順

実際の画面は下記のようなイメージになります。

実現する機能詳細

  1. PDFファイルのプレビュー
  2. PDFファイルのページ数と、現在のページを表示
  3. ページング機能

1. インストール

npm i vue-pdf

2. 実装

<template>
    <div>
        <div class="d-flex align-center justify-center">
            <v-btn
                outlined
                @click="prevPage"
                :disabled="previewer.page_current <= 1"
            >
                戻る
            </v-btn>
            <div class="mx-6">
                {{ previewer.page_current }} / {{ previewer.page_end }}
            </div>
            <v-btn
                outlined
                @click="nextPage"
                :disabled="previewer.page_current === previewer.page_end"
            >
                次へ
            </v-btn>
        </div>
        <pdf
            :src="previewer.src"
            @num-pages="previewer.page_end = $event"
            :page="previewer.page_current"
        ></pdf>
    </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    components: {
        pdf
    },
    data: {
        file_preview: true,
        previewer: {
            src: "https://azscience.jp/machine/docs/dummy.pdf",
            type: null, 
            page_current: 1,
            page_end: null,
        },
    },
    methods: {
        prevPage() {
            this.previewer.page_current -=  1;
        },
        nextPage() {
            this.previewer.page_current += 1;
        },
    }
}
</script>

※今回使用したPDFのダミーデータ
https://azscience.jp/machine/docs/dummy.pdf

コード解説

上記の全体のソースを細分化して解説します。vue-pdfに用意されている属性やイベントを使用していますので、注意しながら読み進めてください。

Vue.js

ライブラリをインポートする

import pdf from 'vue-pdf'

dataを定義

data: {
  previewer: {
    src: "https://azscience.jp/machine/docs/dummy.pdf",
    page_current: 1,
    page_end: null,
  },
},

dataではプレビューに必要なデータをそれぞれ定義します。

  • src : PDFファイルのURL
  • page_current : 表示させるページの初期値
  • page_end : 総ページ数

ページング用のメソッドを定義

methods: {
    prevPage() {
        this.previewer.page_current -= 1;
    },
    nextPage() {
        this.previewer.page_current += 1;
    },
}

テンプレート側

pdfコンポーネントをセット

<pdf
    :src="previewer.src"
    @num-pages="previewer.page_end = $event"
    :page="previewer.page_current"
></pdf>

PDFファイルのURLをセット

:src="previewer.src"

@num-pagesイベントで、総ページ数を取得

@num-pages="previewer.page_end = $event"

:pageで現在のページナンバーを割り当てる

:page="previewer.page_current"

ページネーション

<v-btn
    outlined
    @click="prevPage"
    :disabled="previewer.page_current <= 1"
>
    戻る
</v-btn>
<div class="mx-6">
    {{ previewer.page_current }} / {{ previewer.page_end }}
</div>
<v-btn
    outlined
    @click="nextPage"
    :disabled="previewer.page_current === previewer.page_end"
>
    次へ
</v-btn>

前のページに戻る

<!-- 最初のページの場合は、「戻る」を押せないようにする -->
<v-btn
    outlined
    @click="prevPage"
    :disabled="previewer.page_current <= 1"
>
    戻る
</v-btn>

次のページに進む

<!-- 最後のページの場合は、「次へ」を押せないようにする -->
<v-btn
    outlined
    @click="nextPage"
    :disabled="previewer.page_current === previewer.page_end"
>
    次へ
</v-btn>

現在のページと全ページ数を表示

<div class="mx-6">
    {{ previewer.page_current }} / {{ previewer.page_end }}
</div>

以上でPDFのプレビュー機能実装完了です。

【JavaScript】unixtimeを日付・日時に変換する方法 前の記事 【Vue.js】リッチテキストエディタ「vue-quill-editor」の使い方 次の記事

関連記事

コメント

この記事へのコメントはありません。