h5 vue-pdf，pdf预览，以及第二次打开空白，报错Cannot read properties of undefined (reading ‘catch‘)
<template>
<div>
<van-overlay :show="showOverlay" :lock-scroll="false" class="pdfPage">
<div class="add-popup">
<div class="topCloseIcon" @click="closePdf">
<van-icon name="cross" />
</div>
<div class="overflow-cont">
<van-loading v-if="loading" type="spinner" size="50" vertical style="text-align:center;padding-top:50%;">加载中...</van-loading>
<div v-else>
<div v-if="basePdf" class="pdfbox">
<pdf v-for="i in numPages" :key="i" ref="myPdfComponent" :src="src" :page="i"></pdf>
</div>
<div v-else style="padding-top: 0;">
<van-empty description="暂未生成pdf" />
</div>
</div>
</div>
</div>
</van-overlay>
</div>
</template>
<script>
import { getPDFDataOfYL } from '@/api/';
import CMapReaderFactory from 'vue-pdf/src/';
import pdf from 'vue-pdf';
export default {
name: 'ViewPdf',
components: {
pdf
},
data() {
return {
showOverlay: false,
loading: false,
basePdf: '',
src: '',
numPages: 0,
};
},
created() {
},
mounted() {
this.previewPdf();
},
methods: {
closePdf() {
window.history.back();
},
// 预览PDF
previewPdf() {
this.showOverlay = true;
this.loading = true;
getPDFDataOfYL({ fileId: this.$route.query.fileId }).then(res => {
this.loading = false;
if (res.data.data) {
this.basePdf = res?.data?.data?.data;
const basedata = res?.data?.data?.data;
this.pdfContent = 'data:application/pdf;base64,' + basedata;
this.src = pdf.createLoadingTask({ url: this.pdfContent, CMapReaderFactory });
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
} else {
this.$toast.fail('无法预览和下载');
}
});
},
}
};
</script>
<style lang="less" scoped>
.pdfPage {
height: 100%;
.add-popup {
height: 100%;
.topCloseIcon {
font-size: 24px;
display: flex;
justify-content: end;
padding: 10px 20px;
i {
color: #ffffff;
}
}
.overflow-cont {
height: 100%;
background-color: #ffffff;
}
}
.overflow-cont{
.pdfbox {
height: calc(100vh - 94px);
overflow-y: scroll;
}
}
}
</style>