今日接到需求，需要在项目的某个页面中自定义预览PDF文档，总结了两个方法，以供参考，方法如下：

方法一：使用 vue-pdf 插件来实现

1、先安装 vue-pdf 插件

npm install --save vue-pdf

2、在页面中引用实现：

<template>
  <div class="scrollBox">
      <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf>
  </div>
</template>

3、业务逻辑部分

<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          pdfSrc:"http://image.cache.timepack.cn/nodejs.pdf",
          numPages: null, // pdf 总页数
      }
  },
  mounted() {
      this.getNumPages()
  },
  methods: {
    # 计算pdf页码总数
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.pdfSrc)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },
  }
</script>

方法二：使用 iframe 方式实现

1、iframe 代码部分

<!-- PDF预览 -->
<el-dialog title="PDF预览" :visible.sync="dialogVisible4" width="70%" append-to-body center>
     <iframe :src="pdfSrc" frameborder="0" style="width: 100%; height: 100%"></iframe>
</el-dialog>

2、data 中定义弹窗的显示字段 dialogVisible4

data() {
    return {
        dialogVisible4: false,
        pdfSrc: '', // 将从后台获取到的 PDF 文件地址赋值给这个字段
    }
}

效果图：