vue-pdf 不会在 src 更改时刷新答案

【问题标题】：vue-pdf doesn't refresh on src changevue-pdf 不会在 src 更改时刷新
【发布时间】：2020-08-10 06:37:45
【问题描述】：

我正在使用最新的 vue-pdf 包在我的应用程序中显示 pdf 文件。我构建了这个组件，PdfViewer：

<template>
  <div class="fill-height pdf-container">
    <template v-if="src && numberOfPages">
      <pdf
        v-for="page in numberOfPages"
        :key="`${fileName}-${page}`"
        :src="src"
        :page="page"
      />
    </template>
  </div>
</template>

import { mapGetters } from 'vuex'
import pdf from 'vue-pdf'

export default {
  props: {
    fileName: {
      type: String,
      required: true
    }
  },
  components: {
    pdf
  },
  data() {
    return {
      src: null,
      numberOfPages: 0
    }
  },
  computed: {
    ...mapGetters({
      getAttachments: 'questions/getAttachments'
    })
  },
  methods: {
    init() {
      if (this.fileName) {
        let url = this.getAttachments[this.fileName]
        let loadingTask = pdf.createLoadingTask(url)
        this.src = loadingTask
        this.src.promise.then(pdf => {
          this.numberOfPages = pdf.numPages
        })
      }
    },
  },
  watch: {
    fileName() {
      this.init()
    }
  },
  beforeMount() {
    this.init()
  }
}

基本上我收到一个文件名作为道具，然后在getAttachments getter 中收到的对象中查找它的 URL。文件名在不同的列表组件中。

它在第一次运行时运行良好，并且第一个文件已成功加载并显示。但是一旦单击另一个文件名 - 什么都没有显示。我确实收到了文件名道具，它确实找到了 URL，但文件没有显示。即使我点击已经显示的文件 - 现在它没有。

我认为可能与src 和numberOfPages 属性有关，所以我尝试在加载文件之前重置它们：

init() {
      if (this.fileName) {
        this.src = null
        this.numberOfPages = 0
        let url = this.getAttachments[this.fileName]
        let loadingTask = pdf.createLoadingTask(url)
        this.src = loadingTask
        this.src.promise.then(pdf => {
          this.numberOfPages = pdf.numPages
        })
      }
    }

唉，同样的结果。在控制台中，我看到来自 pdf.worker.js 的以下警告：Warning: TT: invalid function id: 9

不知道是什么意思。

有什么帮助吗？

编辑

我尝试使用 async/await 和 forceUpdate 来做到这一点：

async init() {
      if (this.fileName) {
        this.src = null
        this.numberOfPages = 0
        let url = this.getAttachments[this.fileName]
        let loadingTask = await pdf.createLoadingTask(url)
        await loadingTask.promise.then(pdf => {
          this.src = url
          this.numberOfPages = pdf.numPages
        })
        this.$forceUpdate()
      }
    }

这也没有帮助。但是我发现一旦我更改了传递的文件名，代码确实会转到init() 方法，但由于某种原因它跳过了loadingTask.promise.then 部分，没有进入。我必须知道为什么。

【问题讨论】：

标签： vue.js pdf vue-pdf

【解决方案1】：

嗯，显然 vue-pdf 库存在一些问题。最终我通过在分配 fileName 道具并重新渲染组件时设置超时来解决它：

<PdfViewer v-if="selectedFileName" :fileName="selectedFileName" />

onFileNameSelected(fileName) {
  this.selectedFileName = null
  setTimeout(() => {
    this.selectedFileName = fileName
  }, 0)
}

然后在 PdfViewer 组件中它只是：

created() {
  this.src = pdf.createLoadingTask(this.getAttachments[this.fileName])
},
mounted() {
  this.src.promise.then(pdf => {
    this.numberOfPages = pdf.numPages
  })
}

这对我有用，虽然感觉有点老套。

【讨论】：