获取pdf页码时走的弯路

https://112223333.xyz//pdf/${resource_id} 这个网址是得后端进行配置的大概是吧pdf.js部署在服务器端具体我也不是很清楚我有尝试下载pdf.js放在前端但是在这样会导致跨域如果放置到本地打包上线是否会导致跨域我不是很清楚,现在说说获取网上有很多方法和下面的方法类似

我只是想标记一下我踩得坑

可以获取到iframe 也可以获取到contentWindow 但是打印出来下面的函数里面没有包含PDFViewerApplication
原因可能是你的方法有问题 iframe不能绑定普通路径可以打开pdf,但是不能获取PDFViewerApplication (我只在线下进行的测试 ,线上不知道什么结果)
然后我开始寻找其他方法终于找到方案二前端下载pdf.js 放到public static 文件夹里面 src里面要使用绝对路径然后有个路径拼接这个方法能拿到PDFViewerApplication 但是会报错产生跨域我没有搜到合适的解决方案如果有人知道,欢迎告知
let pdfFrame = this.$refs.pdfPreview.contentWindow; 终于线上了然后又出问题了,整个iframe找不到了(线下测试都能找到),原因就是代码执行和页面渲染的问题还没有加载到执行这个代码获取不到所以加了计时器,但是又出问题了
我自己的逻辑问题计时器清除掉了然后整个代码体都清楚掉了所以不会一直监听所以需要根据实际情况来优化代码

javascript 复制代码

   <iframe v-else-if="resourceType == 'pdf'" id="previewPDF" ref="pdfPreview" :src="`https://112223333.xyz//pdf/${resource_id}`" width="100%" height="100%" class="iframe-content"></iframe>

javascript 复制代码

 getPdfPage() {
                if(timer) clearInterval(timer)
                this.pdfPageNow = 1;
                let pdfFrame = this.$refs.pdfPreview.contentWindow;
                console.log(pdfFrame, "pad的值");
                console.log("pdfFrame.PDFViewerApplication", pdfFrame.PDFViewerApplication);
                let timer = null
                timer = setInterval(() => {
                this.count = this.count + 1;
                console.log(this.count);
                if(this.count > 24) {
                    clearInterval(timer)
                }
                if(pdfFrame && pdfFrame.PDFViewerApplication){
                    clearInterval(timer)
                    let maxNum = pdfFrame.PDFViewerApplication.pagesCount;
                    if (maxNum == 0 || maxNum == undefined) {
					// 直接获取页面显示的总页数，获取到了说明加载完成
					console.info("Loading...");
				} else {
					if (maxNum < 2) {
						console.log(`1/1, prog：100%`);
					} else {
                        this.pdfPageNow=pdfFrame.PDFViewerApplication.page
                        console.log("首次加载完成获取到值",this.pdfPageNow);
						pdfFrame.document
							.getElementById("viewerContainer") // 监听pdf滚动事件
							.addEventListener("scroll", e => {
								let pdfInfo = pdfFrame.PDFViewerApplication;
								if (this.pdfPageNow !== pdfInfo.page) {
									// 防抖：当前页变化时，更新进度
									this.pdfPageNow = pdfInfo.page;
                                    console.log("滚动的时候当前页码值",this.pdfPageNow);
                                    this.getAll(this.resource_id, this.pdfPageNow);
								}
							});
					}
				}
                } 
                }, 500);
            },