npm安装:npm install --save vue-pdf
1.多页上拉加载页面

<template>
    <div class="pre_lump">
      <div class="choice_box">
        <div class="form-data">
          <div class="pdf" id="example">
            <pdf
              ref="pdf"
              v-for="i in numPages"
              :key="i"
              :src="pdfUrl"
              :page="i"
              ></pdf>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  props:{
	url:{
		type:String,
		default:''
	} 
  },
  data(){
      return {
          pdfUrl:"",
          numPages: null, // pdf 总页数
      }
  },
  mounted() {
	  this.pdfUrl = this.url
      this.getNumPages()
  },
  methods: {

    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    }
  }
  }
</script>
<style>
  /* 弹窗的外层样式 */
  .pre_lump {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1111;
  }

  .pre_lump .choice_box {
    position: absolute;
    width: 50%;
    min-width: 850px;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 2px;
  }
  #example {
    width: 100%;
    height: 100%;
  }
  .top_tips {
    margin: 0 20px;
    height: 54px;
    line-height: 54px;
    border-bottom: 1px solid rgb(233, 233, 233);
  }

  .top_tips .tips {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }

  .top_tips i {
    font-size: 18px;
    color: #333333;
  }
  .bot_bottom_bot {
    position: absolute;
    right: 2%;
    bottom: 3%;
    border-top: 1px solid rgb(233, 233, 233);
  }
  .form-data {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    height: calc(100% - 60px);
    margin: 15px auto;
    overflow-y: auto;
  }
  .pagination {
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%);
    background-color: #ccc;
    text-align: center;
    padding: 0 10px;
    user-select: none;
    height: 30px;
    line-height: 30px;

  }

  .pagination .arrow2 span {
    cursor: pointer;
    display: inline-block;
    background-color: #e53935;
    color: #fff;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 6px;

  }

  .close {
    width: 34px;
    height: 34px;
    margin: 10px 0;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }

  .close .el-icon-close {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

预览效果:

2.单页面点击上一页下一页加载页面

<template>
  <div class="pre_lump">
    <div class="choice_box">
      <div class="form-data">
        <div class="pdf" id="example">
          <pdf
            ref="pdf"
            v-if="pdfSrc"
            :src="pdfSrc"
            :page="currentPage"
            @num-pages="pageCount = $event"
            @page-loaded="currentPage = $event"
            @loaded="loadPdfHandler"
          >
          </pdf>
        </div>
      </div>
      <div class="pagination">
        <p class="arrow2" v-if="pdfSrc">
          <el-button
            type="primary"
            size="mini"
            @click="changePdfPage(0)"
            :disabled="currentPage == 1"
            >上一页</el-button
          >
          {
   { currentPage }} / {
   { pageCount }}
          <el-button
            type="primary"
            size="mini"
            @click="changePdfPage(1)"
            :disabled="currentPage == pageCount"
            >下一页</el-button
          >
        </p>
      </div>
    </div>
  </div>
</template>


<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: "https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003282521.pdf",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      numPages: 1,
      activeIndex: 0,
    };
  },
  methods: {

    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    }
  }
};
</script>
<style >
/* 弹窗的外层样式 */
.pre_lump {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1111;
}

.pre_lump .choice_box {
  position: absolute;
  width: 50%;
  min-width: 850px;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 2px;
}
#example {
  width: 100%;
  height: 100%;
}
.top_tips {
  margin: 0 20px;
  height: 54px;
  line-height: 54px;
  border-bottom: 1px solid rgb(233, 233, 233);
}

.top_tips .tips {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.top_tips i {
  font-size: 18px;
  color: #333333;
}
.bot_bottom_bot {
  position: absolute;
  right: 2%;
  bottom: 3%;
  border-top: 1px solid rgb(233, 233, 233);
}
.form-data {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  height: calc(100% - 60px);
  margin: 15px auto;
  overflow-y: auto;
}
.pagination {
  position: absolute;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, 0%);
  background-color: #ccc;
  text-align: center;
  padding: 0 10px;
  user-select: none;
  height: 30px;
  line-height: 30px;

}

.pagination .arrow2 span {
  cursor: pointer;
  display: inline-block;
  background-color: #e53935;
  color: #fff;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 6px;

}

.close {
  width: 34px;
  height: 34px;
  margin: 10px 0;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.close .el-icon-close {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-icon-close:hover {
  color: red;
  background-color: #f0f0f0;
  border-radius: 50%;
}
</style>

预览效果:

3.html页面引入jquery实现pdf文件的在线预览
pdf.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>在线预览PDF文档</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.media.js"></script>
<script type="text/javascript">
    $(function() {
        $('a.media').media({width:800, height:900});

    });
</script>

</head>
<body>
<center>
   <div class="panel-body">
	  <a class="media" href="https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf"></a>
   </div>  
</center>
</body>
</html>

预览效果:

以下线上pdf文件地址提供测试
pdfUrl1:“https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-29/1546049718768.pdf”

pdfUr2l:“http://file.gp58.com/file/2018-11-14/111405.pdf”

pdfUrl3:“https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf”

pdfUrl4:“https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003282521.pdf”