vue-pdf异步更新url第二次预览打开空白问题

使用vue-pdf，并把它封装成一个文件后，第一次调用是没有问题的，问题是当你切换pdfUrl的时候，pdf并不会马上置换掉，再点击一次的时候才会置换成新的pdfurl

由于父子组件存在调用,出现了,pdf预览每次只能查看一个,别的打开空白：

安装依赖

npm install --save vue-pdf

将vue-pdf封装成一个组件

<template>

<div>

    <pdf

        v-for="i in numPages"

        :key="i"

        :src="src"

        :page="i"

        ></pdf>

</div>

</template>

<script>

import pdf from 'vue-pdf'

export default {

    name: 'vuePdf',

    components: {

        pdf

    },

    props: {

    pdfSrc: {

        type: String,

            require: true

        }

    },

data() {

return {

    src: '',

        numPages: undefined,

    }

},

mounted() {

  this.loadPDF(this.pdfSrc)

},

methods:{

loadPDF(url){

    this.src=pdf.createLoadingTask(url)

    this.src.promise.then(pdf => {

        this.numPages = pdf.numPages;//获取pdf页数

    });

},

//很重要,父组件关闭前,清空子组件的值,不然第二次预览打开空白

    resetPageNum(){

        this.numPages=undefined

    }

}

}

</script>

父组件中使用

html部分:先引入注册,在使用

import vuePdf from './pdf'

components: { vuePdf}

<van-popup v-model="show" round position="bottom" :close-on-click-overlay="false" :style="{ height: '80%' }">

<div>

      <vue-pdf ref="mypdf" :pdf-src="fileUrl" :key="fileId"></vue-pdf>

  </div>

</van-popup>

//关闭pdf弹窗的方法

closePopup(){

    //调用子组件的重置数据方法,解决空白问题

    this.$refs.mypdf.resetPageNum()

    this.show=false

},

//预览的方法,传入id通过接口查询pdf的url

showpdf(id) {   

    this.fileUrl = https://aliyuncs.com/applet/fb3e9155150141da94e3b22271dc06.pdf

    this.fileId = id

    this.show = true

},

解决方案：

通过子组件定义清空数据的方法,在父组件关闭子组件弹窗前调用,让子组件重新刷新页面,重新渲染.