vue-pdf的使用及常见问题修复

项目场景：

项目中有上传pdf,就伴随着pdf的预览功能,vue-pdf可实现此功能.

在vue-elementUI 的项目中,需要上传pdf列表然后逐一预览,如下图所示:

---

基本使用过程

1.先进行安装依赖：

npm install --save vue-pdf

2.将vue-pdf封装为一个组件

<template>
	<div>
		<pdf
			v-for="i in numPages"
			:key="i"
			:src="src"
			:page="i"
			style="display: inline-block; width: 100%"
		>pdf>
	div>
template>
<script>
import pdf from 'vue-pdf'
export default {
    name: 'AppPdf',
	components: {
		pdf
	},
    props: {
	    fileSrc: {
	        type: String,
            require: true
        }
    },
	data() {
		return {
			src: '',
			numPages: undefined,
		}
	},
	mounted() {
	   this.loadUPDf(this.fileSrc)
	},
	methods:{
		loadUPDf(url){
			this.src=pdf.createLoadingTask(url)
			this.src.promise.then(pdf => {
				this.numPages = pdf.numPages;//获取pdf页数
			});
		},
		//很重要,父组件关闭前,清空子组件的值,不然第二次预览打开空白
		resetPageNum(){
			this.numPages=undefined
		}
	}
}
script>

3.父组件中使用
html部分:先引入注册,在使用

import AppPdf from '../pdf/index'

 components: { AppPdf}

<el-dialog :visible.sync="dialogVisible" title="PDF预览" width="80%" @close="closedialog" :close-on-click-modal="false">
   <div style="height: calc(90vh - 160px);overflow-y: auto;">
      <app-pdf ref="mypdf" :file-src="fileCont" :key="fileId">app-pdf>
   div>
el-dialog>

//关闭pdf弹窗的方法
closedialog(){
    //调用子组件的重置数据方法,解决空白问题
     this.$refs.mypdf.resetPageNum()
     this.dialogVisible=false
 },
 //预览的方法,传入id通过接口查询pdf的url
 see(id) {            
     this.fileCont = this.$config.VUE_APP_API_HOST_DEFAULT + '/file/download?fileId='+id+'&accessToken=' + getAccessToken()
     this.fileId = id
     this.dialogVisible = true
 },

---

问题描述

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

---

解决方案：

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