使用 vue-pdf 遇到的问题

Posted 2023-04-22

参考技术A 先在 pdfList 去掉要替换的页数，再加入想要替换成的页数，把添加页数放到异步队列中执行。

vue-pdf 无法加载到所有页面“未定义的属性”

【中文标题】vue-pdf 无法加载到所有页面“未定义的属性”

【英文标题】：vue-pdf unable load to all pages "undefined property"

【发布时间】：2020-12-01 02:05:06

【问题描述】：

我正在使用：

Vue.js、vue-route、Vuetify、Firebase（此处为数据库）和 vue-pdf

我正在尝试使用 "vue-pdf" 加载所有 pdf 页面，但是当我尝试阅读 pdf 时出现此错误。

未捕获的类型错误：无法读取未定义的属性“小说”

我有一个名为 novel 的对象，它最初设置为 null。当我从 Firebase 获取数据时，它被分配给这个新对象。我按照教程here 加载了多个pdf页面。但是，在本教程中使用了直接 URL，但在我的情况下，我尝试访问对象内的特定值，即 "this.novel.nove_url"。我不确定我在这里做错了什么，我的代码如下。非常感谢任何帮助。

<template>
  <div>
    <Navbar />
    <v-container fluid>
      <h1>novel.title</h1>
      <div class="novel-display container">
        <pdf
          v-for="i in numPages"
          :key="i"
          :src="src" //this should display the loaded pdf file
          :page="i"
          style="display: inline-block; width: 100%"
          @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event"
        ></pdf>
      </div>
      <div class="text-center">
        <v-pagination v-model="currentPage" :length="pageCount" :total-visible="7" circle></v-pagination>
      </div>
    </v-container>
    <Footer />
  </div>
</template>
<script>
import Navbar from "./Navbar";
import Footer from "./Footer";
import pdf from "vue-pdf";
import db from "../db";
// var loadPDF = pdf.createLoadingTask(
//   "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK"
// );
var loadingTask = pdf.createLoadingTask(this.novel.novel_url); //the file I would like to load

export default 
  name: "Read",
  components: 
    Navbar,
    Footer,
    pdf,
  ,
  data() 
    return 
      novel: null, // data from Firebase is saved here
      src: loadingTask ,
      currentPage: 0,
      pageCount: 0,
      numPages: undefined,
    ;
  ,
  mounted() 
    this.src.promise.then((pdf) => 
      this.numPages = pdf.numPages;
    );
  ,
  created() 
    let ref = db
      .collection("Novels")
      .where("novel_slug", "==", this.$route.params.novel_slug);
    ref.get().then((snapshot) => 
      snapshot.forEach((doc) => 
        this.novel = doc.data();
        this.novel.id = doc.id;
      );
    );
  ,
;
</script>

【参考方案1】：

您不能在export default 之外使用this（请参阅here）。此外，Firebase 数据库获取是异步的，因此 novel 属性仅在 get() 返回的承诺得到满足时才会填充（即in the callback functions passed to the then() method）

您可以在created()钩子中初始化loadingTask，在get().then()中，如下（未经测试）：

import Footer from "./Footer";
import pdf from "vue-pdf";
import db from "../db";

export default 
  name: "Read",
  components: 
    Navbar,
    Footer,
    pdf,
  ,
  data() 
    return 
      novel: null, // data from Firebase is saved here
      src: null ,
      currentPage: 0,
      pageCount: 0,
      numPages: undefined,
    ;
  ,
  mounted() 
    this.src.promise.then((pdf) => 
      this.numPages = pdf.numPages;
    );
  ,
  created() 
    let ref = db
      .collection("Novels")
      .where("novel_slug", "==", this.$route.params.novel_slug);
    ref.get().then((snapshot) => 
      snapshot.forEach((doc) => 
        this.novel = doc.data();
        this.novel.id = doc.id;
      );
      this.src = pdf.createLoadingTask(this.novel.novel_url); 
    );
  ,
;
</script>

【讨论】：

非常感谢您的时间和帮助。这确实有效，我只需要在挂载函数中获取代码并将其放在您的解决方案下，它就可以工作了。再次感谢您的光临。

不客气，很高兴能帮到你。也请投票赞成答案，请参阅***.com/help/someone-answers。谢谢。

我刚做了。谢谢