Gyyq-Upstairs/src/views/compilation/handbook/yulan.vue

<template>
  <div>
    <!-- 显示当前页 -->
    <pdf
      v-if="show"
      :src="pdfUrl"
      @num-pages="pageCount = $event"
      @link-clicked="gotoPage($event)"
      style="border: 1px solid black;"
    ></pdf>

    <!-- 控制按钮 -->
    <button @click="prevPage">上一页</button>
    {{ currentPage }} / {{ pageCount }}
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  components: {
    pdf,
  },
  data() {
    return {
      show: false, // 是否加载完成
      pdfUrl: "", // PDF 文件路径
      currentPage: 1, // 当前页码
      pageCount: 0, // 总页数
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      // 设置 PDF 路径
      this.pdfUrl = "pdf/模板.pdf";
      this.show = true;
    },
    gotoPage(pageNumber) {
      if (pageNumber >= 1 && pageNumber <= this.pageCount) {
        this.currentPage = pageNumber;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
  },
};
</script>