项目中需要用到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

Logo

前往低代码交流专区

更多推荐