安装依赖

npm i vue-pdf --save

使用文档

使用文档

实现代码

/**
* @Author: 858834013@qq.com
* @Name: pdf
* @Date: 2022-04-11
* @Desc:
*/
<template>
  <div class="pdfbodys">
    <div class="pdfbody scroll" ref="pdfbody">
      <pdf :src="item.pdfFileUrl"
           :page="currentPage"
           class="pdfs"
           v-if="item.pdfFileUrl"
           @num-pages="pageCount=$event"
           @page-loaded="currentPage=$event"
           @loaded="loadPdf">
      </pdf>
    </div>
    <div class="pageButton">
      <el-button size="mini" @click="changePage(0)" round>上一页</el-button>
      <span class="pagesnum"> {{ currentPage }} / {{ pageCount }} </span>
      <el-button size="mini" @click="changePage(1)" round>下一页</el-button>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: "pdfs",
  components: {pdf},
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      status: '',
      pdfFile: "", //pdf文件地址
      currentPage: 0, // 页码
      pageCount: 0, // 总页数
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    // 翻页
    changePage(val) {
      this.$refs.pdfbody.scrollTo(0, 0);
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdf() {
      this.currentPage = 1 // 加载的时候先加载第一页
    }
  }
}
</script>

<style lang="scss" scoped>
.pdfbody {
  position: relative;
  width: 100%;
  height: calc(100% - 80px);
  overflow: scroll;
}

.pageButton {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  height: 80px;

  .pagesnum {
    margin-left: 20px;
    margin-right: 20px;
    color: #FEFEFF;
    font-size: 16px;
  }
}

.pdfbodys {
  position: relative;
  width: 100%;
  height: 100%;
}

.pdfs {
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
}
</style>