vue嵌入PDF预览以及报错（Cannot read properties of undefined (reading ‘catch‘)）解决

项目中需要用到PDF预览，查并尝试了很多种方法，使用了iframe，但是无法访问链接，可能是跨域问题，没有深究。使用了pdfjs,引入后模块报错，无法启动，可能是版本问题，最后选择了vue-pdf。

下载依赖：

npm install --save vue-pdf

引入：

import pdf from "vue-pdf";

使用（这里使用的是带有分页的，否则只会展示一页）：

  components: {
    pdf,
  },

  <pdf ref="pdf" :src="url" v-for="i in numPages" :key="i" :page="i"> </pdf>

// 计算pdf页码总数
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
          console.log(  this.numPages)
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },

注意：启动项目后，PDF正常展示但是会报错：

Cannot read properties of undefined (reading 'catch')

经查阅，原来是版本问题，解决：在控制台输入一下命令

npm i pdfjs-dist@2.5.207

npm i vue-pdf@4.2.0