Vue-pdf 实现文件预览功能

参与github 文档 

​​​​​​GitHub - FranckFreiburger/vue-pdf: vue.js pdf viewer

完整示例代码、

安装组件》注册组件》使用组件

npm install vue-pdf

yarn add vue-pdf

<template>
  <div class="app-container">
    <el-col :span="1.5">
      <el-button @click="handleBack" icon="el-icon-d-arrow-left" size="mini" type="primary">返回</el-button>
    </el-col>

    <div class="pdf_wrap">
      <div class="pdf_list">
        <!-- src:pdf地址，page: 当前显示页 -->
        <pdf :key="i" :page="i" :src="src" style="width: 100%" v-for="i in numPages"></pdf>
      </div>
    </div>
  </div>
</template>
<script>

  import { getProject } from '@/api/project/project'
  import pdf from 'vue-pdf'

  export default {
    components: {
      pdf
    },
    data() {
      return {
        alyImagesPath: 'https://oss.zenithward.cn',
        projectId: '',
        numPages: undefined,
        currentPage: 0,
        pageCount: 0,
        pdfUrl: '',
        src: ''
      }
    },
    created() {
      this.projectId = this.$route.query.projectId
    },
    mounted() {
      this.initBzProject()
    },
    methods: {

      handleBack() {
        // 调用全局挂载的方法,关闭当前标签页
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.push(
          {
            path: '/project/stander',
            query: { projectId: this.$route.query.projectId }
          })
      },
      initBzProject() {
        getProject(this.projectId).then(response => {
          let projectVo = response.data
          this.pdfUrl = this.alyImagesPath + projectVo.fileUrl
          this.loadPdf()
        })
      },
      loadPdf() {
        this.src = pdf.createLoadingTask(this.pdfUrl)
        this.src.promise.then(pdf => {
          this.numPages = pdf.numPages // 这里拿到当前pdf总页数
        })
      }
    }
  }

</script>
<style scoped>
  .pdf_wrap {
    background: #fff;
    height: 90vh;
  }

  .pdf_list {
    height: 95vh;
    overflow: scroll;
  }
</style>

在浏览器中

vue-pdf组件报错vue-pdf Cannot read properties of undefined (reading ‘catch‘)

执行命令，指定对应版本安装即可

npm i pdfjs-dist@2.5.207
npm i vue-pdf@4.2.0