使用vue-pdf一个页面内,动态切换src时不刷新或不生效
参考如下:
子组件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 pdf from 'vue-pdf'
export default {
  props: {
    fileName: {
      type: String,
      required: true
    }
  },
  components: {
    pdf
  },
  data() {
    return {
      src: null,
      numberOfPages: 0
    }
  },
  created() {
    this.src = pdf.createLoadingTask(this.fileName, { withCredentials: false });
  },
  mounted() {
    this.src.promise
      .then((pdf) => {
        this.numberOfPages = pdf.numPages;
      })
      .catch((err) => {
        console.error('pdf加载失败', err);
      });
  },
}

主组件代码如下:

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


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