获取pdf页码时走的弯路

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

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

   <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>

 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);
            },

原文地址：https://blog.csdn.net/m0_45858045/article/details/140441118

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！