vue安裝vue-pdf(預覽pdf)

# npm

npm install --save vue-pdf
           

# 頁面引用

// pdf預覽
import pdf from "vue-pdf";
           

# 頁面使用

<template>
  <div class="main">
    <div>
      <button type="button" @click="changePdfPage(0)">上一頁</button>
      <button type="button" @click="changePdfPage(1)">下一頁</button>
    </div>
    <p>{{ currentPage }} / {{ pageCount }}</p>
    <div>
      <button type="button" @click="scaleD()">放大</button>
      <button type="button" @click="scaleX()">縮小</button>
    </div>
    <div>
      <button type="button" @click="clock()">順時針</button>
      <button type="button" @click="counterClock()">逆時針</button>
    </div>
    <pdf
      ref="pdf"
      :src="src"
      :page="currentPage"
      :rotate="pageRotate"
      @num-pages="pageCount = $event"
      @page-loaded="currentPage = $event"
      @loaded="loadPdfHandler"
    ></pdf>
  </div>
</template>

<script>
// pdf預覽
import pdf from "vue-pdf";
export default {
  name: "home",
  components: {
    pdf
  },
  data() {
    return {
      src:
        "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      currentPage: 0, // pdf檔案頁碼
      pageCount: 0, // pdf檔案總頁數
      scale: 100,
      pageRotate: 0
    };
  },
  methods: {
    // pdf加載時
    loadPdfHandler(e) {
      e;
      this.currentPage = 1; // 加載的時候先加載第一頁
    },
    // 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    //縮小
    scaleX() {
      if (this.scale === 100) {
        return;
      }
      this.scale += -5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    // 順時針
    clock() {
      this.pageRotate += 90;
    },
    // 逆時針
    counterClock() {
      this.pageRotate -= 90;
    }
  }
};
</script>

<style scoped>
.main {
  width: 500px;
  margin: 0 auto;
  border: 2px solid #409eff;
  padding: 10px;
}
</style>
           

預設顯示第一頁

更多請看文檔：https://www.npmjs.com/package/vue-pdf