1

我正在尝试使用 vue-pdf 库将 API 中的多页 pdf 加载到 vue.js 中。

我已经可以成功加载 pdf 并呈现第一页，如前面的问题中所述

我已经按照文档中给出的说明进行了 尝试，并尝试了使用 / 不使用 loadingTask 并使用不同的页数选项。

我附上了下面的代码。这个版本没有显示页码，也没有pdf。控制台有“loadPdf called”和“success”日志消息并且没有错误。

<template>
  <div>
    <h3>page count is {{ numPages }}</h3>
    <pdf v-for="i in numPages" :key="i" :page="i" :src="pdfsrc"></pdf>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import axios from "axios";
import ActiveDirectoryService from "@/services/ActiveDirectoryService.js";

export default {
  components: {
    pdf
  },
  props: {
    exportId: String
  },

  data() {
    return {
      pdfsrc: null,
      numPages: null,
      objectUrl: null
    };
  },
  mounted() {
    if (this.pdfsrc === null) return;
    this.pdfsrc.promise.then(pdf => {
      this.numPages = pdf.numPages;
    });
  },
  methods: {
    loadPdf() {
      console.log("loadPdf called");
      return axios
        .get(`${process.env.VUE_APP_API_INTRANET}/pdf`, {
          responseType: "blob"
        })
        .then(response => {
          console.log("Success", response);

          const blob = new Blob([response.data]);
          const objectUrl = URL.createObjectURL(blob);
          this.pdfsrc = pdf.createLoadingTask(objectUrl);
        })
        .catch(console.error); //
    },
    clearBuffer() {
      if (this.objectUrl !== null) {
        URL.revokeObjectURL(this.objectUrl);
        this.pdfsrc = null;
        this.objectUrl = null;
      }
    }
  },

  watch: {
    exportId: function(oldVal, newVal) {
      console.log("id Changed api for pdf.");
      this.loadPdf();
    }
  },
  created() {
    console.log("created with id ", this.exportId);
    this.loadPdf();
  },
  beforeDestroy() {
    this.clearBuffer();
  }
};
</script>

<style scoped></style>

我正在使用总共 46kb 的小 3 页 pdf 进行测试。我最接近让它工作的方法是将页数硬编码为 3，从而正确呈现 pdf。例如

   <pdf v-for="i in 3" :key="i" :page="i" :src="pdfsrc"></pdf>

它有效，但显然不是解决方案！

我还尝试了其他加载“numPages”的方法，例如将其添加到 pdf

@num-pages="numPages = $event"

并使用返回 this.pdf.numPages 的计算

但到目前为止，一切都失败了。

我也尝试过将获得 numpages 的承诺移到 loadPdf 方法中，就像这样

   .then(response => {
          console.log("Success", response);

          const blob = new Blob([response.data]);
          const objectUrl = URL.createObjectURL(blob);
          this.pdfsrc = pdf.createLoadingTask(objectUrl);
          this.pdfsrc.promise.then(pdf => {
            this.numPages = pdf.numPages;
          });
        })
        .catch(console.error); //

这也行不通。

更新

我已经按照要求在代码中添加了日志语句。一切看起来都应该正常工作。

       .then(response => {
          console.log("Success", response);

          const blob = new Blob([response.data]);
          const objectUrl = URL.createObjectURL(blob);
          this.pdfsrc = pdf.createLoadingTask(objectUrl);
          console.log("this.pdfsrc.promise", this.pdfsrc.promise);
          this.pdfsrc.promise.then(pdf => {
            console.log("pdf in callback", pdf);
            this.numPages = pdf.numPages;
            console.log(
              `this.numPages: ${this.numPages} pdf.numPages: ${pdf.numPages} `
            );
            console.log(this);
          });
        })

日志内容看起来很正常

更新 2

我已经清理了我的示例并删除了此行

@num-pages="numPages = $event"

从模板开始，一切都开始了！我已经追溯了代码中的更改，似乎将对象 url 包装在 loadingTask 中并将承诺移至 loadPdf() 方法是修复它的原因。

4

0 回答 0