vue預覽PDF檔案

插件

npm install --save vue-pdf

github 位址

https://github.com/FranckFreiburger/vue-pdf#readme

代碼實作

<template>
  <div class="pdf">
    <div class="pdf-header">
      <h1>
        Web前端工程師-陳佳兵
        <el-button type="info" @click="back">傳回至首頁</el-button>
      </h1>
    </div>
    <p class="arrow">
      <el-button type="primary" @click="changePdfPage(0)">上一頁</el-button>
      {{currentPage}} / {{pageCount}}
      <el-button type="primary" @click="changePdfPage(1)">下一頁</el-button>
    </p>
    <pdf
      class="pdf-wrapper"
      :src="pdfSrc"
      :page="currentPage"
      @num-pages="pageCount=$event"
      @page-loaded="currentPage=$event"
      @loaded="loadPdfHandler"
    ></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  created() {
    this.pdfSrc = pdf.createLoadingTask(this.pdfSrc)
  },
  data() {
    return {
      pdfSrc: require('../../../public/resume/resume.pdf'),
      currentPage: 0, // pdf檔案頁碼
      pageCount: 0, // pdf檔案總頁數
      fileType: 'pdf' // 檔案類型
    }
  },
  methods: {
    // 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁
    changePdfPage(val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
        // console.log(this.currentPage)
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
        // console.log(this.currentPage)
      }
    },
    // pdf加載時
    loadPdfHandler(e) {
      this.currentPage = 1 // 加載的時候先加載第一頁
    },
    back() {
      this.$router.push('/')
    }
  }
}
</script>
<style scoped>
  .pdf {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: url('../../../public/images/bg.png');
  }
  .pdf-header {
    text-align: center;
    font-size: 50px;
  }
  .arrow {
    text-align: center;
  }
  .pdf-wrapper {
    padding: 20px 0;
    box-sizing: border-box;
    width: 800px;
    left: 50%;
    margin-left: -400px;
  }
</style>