vue-pdf はオンラインファイルプレビューを実現します

<テンプレート>
 <div class="pdf-box">
 //pdf 表示<pdf
          クラス="pdf"
          :page="ページ番号"
          :src="pdfForm.url"
          @progress="読み込み比率 = $event"
          @num-pages="pageTotalNum = $event"
        </pdf>
        //ページ番号の切り替え <div class="page-box">
          <el-ボタングループ>
            <el-ボタン
              タイプ="プライマリ"
              アイコン="el-icon-arrow-left"
              サイズ="ミニ"
              @click="prePage"
              >前のページ</el-button
            >
            <el-button type="primary" size="mini" @click="nextPage"
              >次のページ<i class="el-icon-arrow-right el-icon--right"></i
            </el-button>
          </el-button-group>
          //ページ番号表示 <div style=" color: #409EFF; display: flex; justify-content: flex-end;">
            {{ ページ数 }} / {{ ページ総数 }}
          </div>
        </div>
      </div>
</テンプレート>

<スクリプト>
'vue-pdf' から pdf をインポートします
エクスポートデフォルト{
  名前: 'pdf',
  コンポーネント: { pdf },
  データ （） {
   pdfフォーム: { url: '' },
      // PDFを表示
      url:''、
      ページ番号: 1,
      pageTotalNum: 1, // 総ページ数 loadedRatio: 0 // 現在のページの読み込みの進行状況。範囲は 0 ～ 1 で、1 の場合は現在のページが完全に読み込まれたことを意味します},
  方法：{
 //前のページ prePage() {
      ページ = this.pageNum とします
      ページ = ページ > 1 ? ページ - 1 : this.pageTotalNum
      this.pageNum = ページ
    },

    // 次のページ nextPage() {
      ページ = this.pageNum とします
      ページ = ページ < this.pageTotalNum ? ページ + 1 : 1
      this.pageNum = ページ
    },
  }
 }
</スクリプト>