在渲染pdf的时候，多次刷新会出现文件倒置的现象。请问怎么解决？

[小肥狗]

下面是调用源码：

<script> import {Button, Carousel, CarouselItem, Loading} from 'element-ui'; import pdf from 'vue-pdf'; import {API} from '@/service/const'; export default { name: "ShowPdf", props: { fileId: { type: String, required: true }, allPage: { type: Boolean, default: true } }, created() { this.carouselHeight = document.body.offsetHeight; this.autoHeight = `${this.carouselHeight * 0.95}px`; this.loadingService = Loading.service(this.loadingOptions); }, components: { 'el-button': Button, 'el-carousel': Carousel, 'el-carousel-item': CarouselItem, pdf }, data() { return { viewVisible: true, src: null, pdfPage: 1, pageCount: 0, loadingService: {}, loadingOptions: { body: true, lock: true, text: 'PDF加载中，请稍候...', spinner: 'el-icon-loading', background: 'rgba(225,225,225,0.7)' }, carouselHeight: 300, autoHeight: '', start: [], // 记录双指缩放时的开始位置数据 isTouch: false, // 是否已经触屏 widthData: 100 // pdf渲染的宽度 } }, watch: { 'carouselHeight': function (val) { this.autoHeight = `${val * 0.95}px`; }, immediate: true, deep: true }, methods: { loadPreview(fileId) { let token = document.getElementById("token").getAttribute('content'); let request = `/${API.view_pdf}?token=${token}&fileId=${fileId}`; let headers = { 'Authorization': token, 'x-ipp-device-uuid': fileId, }; // this.src = pdf.createLoadingTask(request, headers); // this.src.then(pdf => { // this.pageCount = pdf.numPages; // setTimeout(() => { // this.closeLoading(); // }, Math.log(this.pageCount) * 600); // }).catch(err => { // this.closeLoading(); // console.log(err); // this.$AutoTis.failed("PDF加载失败，请联系管理员"); // }); // local test this.src = pdf.createLoadingTask('/static/file/123.pdf'); this.src.then(pdf => { this.pageCount = pdf.numPages; setTimeout(() => { this.$nextTick(() => { this.loadingService.close(); }) }, Math.log(this.pageCount) * 600); }).catch(err => { console.log(err); this.$AutoTis.failed(`加载失败，详情：${err}`); }); }, previousPage() { let p = this.pdfPage; p = p > 1 ? p - 1 : this.pageCount; this.pdfPage = p; }, nextPage() { let p = this.pdfPage; p = p < this.pageCount ? p + 1 : 1; this.pdfPage = p; }, handleLoad(event) { console.log((new Date()).getTime()); }, closeLoading() { if (!this.loadingService) return; this.$nextTick(() => { this.loadingService.close(); }); }, }, mounted() { // 允许meta viewport用户缩放功能(最大可放大6倍) document.getElementsByName("viewport").forEach(item=>{ if(item.name==="viewport"){ item.content = "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=6,user-scalable=1" } }); const that = this; window.onresize = () => { return (() => { window.screenHeight = document.body.offsetHeight; that.carouselHeight = window.screenHeight; })() }; this.loadPreview(this.fileId); }, beforeDestroy() { this.closeLoading(); this.loadingService = {}; // 关闭meta viewport用户缩放功能 document.getElementsByName("viewport").forEach(item=>{ if(item.name==="viewport"){ item.content = "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" } }); } } </script> <style> .el-carousel__indicator button { background-color: rgba(64, 158, 255, 0.8); } </style> <style scoped> .full-bd { border-style: solid; border-color: #999; border-width: 2px; box-shadow: 2px 2px 10px 2px #999; display: inline-block; } </style>

[QiJun Zhou]

请使用英文，并且提供复现的 demo 线上链接。