实现方案：利用vue-pdf插件

1、安装依赖：

npm install vue-pdf --save-dev

2、编写代码

DEMO:

<template>
  <div class="main">
    <pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>
  </div>
</template>
 
<script>
  //引入vue-pdf
  import pdf from 'vue-pdf'
  // 解决部分文字不显示的问题
  import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
  export default {
     data () {
       return {
         src: '',
         numPages: 0,
         page: 1,
         currentPage: 0
       };
     },
     components: {
       pdf
     },
    created() {
      this.getPDFData();
    },
    methods: {
      // 获取数据
      getPDFData() {
        this.$https({
          url: "pdfUrl",
          method: 'get',
        }).then(({
          data
        }) => {
           //pdf字节流pdfContent 
          this.pdfContent ='data:application/pdf;base64,'+data.content;
          this.src = pdf.createLoadingTask({ url: this.pdfContent, CMapReaderFactory });
          this.src.promise.then(pdf => {
             this.numPages = pdf.numPages;
          });
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  .main {
    width: 100%;
    height: 100%;
  }
</style>