获取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 = nulltimer = 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.pageconsole.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);},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/46643.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

object-C 解答算法:两数之和(leetCode-1)

两数之和(leetCode-1) 题目如下图:(也可以到leetCode上看完整题目,题号1) 解答方法一: 最简单的方法就是双指针遍历数组.代码如下 - (NSMutableArray *)sumOfTwoNumbers:(NSMutableArray *)array target:(int)target {NSMutableArray * resultArray [[NSMutableArray alloc…

【python】操作mysql数据库

一、操作步骤 MySQL是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它使用结构化查询语言&#xff08;SQL&#xff09;作为操作和管理数据的主要方式。MySQL具有以下特点&#xff1a; 开源&#xff1a;MySQL是开源软件&#xff0c;这意味着任何人…

数电基础 - 触发器

目录 ​编辑 一. 简介 二. SR锁存器 三. JK 触发器 四. D 触发器 五. 电平触发的触发器 六. 脉冲触发的触发器 七. 边沿触发的触发器 八 . 触发器的逻辑功能和描述方法 一. 简介 触发器是数字电路中的一种基本存储单元&#xff0c;具有记忆功能&#xff0c;能够存储一…

36.UART(通用异步收发传输器)-RS232(3)

&#xff08;1&#xff09;串口发送模块visio视图&#xff1a; &#xff08;2&#xff09;串口发送模块Verilog代码: /* 常见波特率&#xff1a; 4800、9600、14400、115200 在系统时钟为50MHz时&#xff0c;对应计数为&#xff1a; (1/4800) * 10^9 /20 -1 10416 …

macOS 安装软件提示 “已损坏,无法打开。 您应该将推出磁盘映像” 或 “已损坏,无法打开。 您应该将它移到废纸篓”,解决办法

本文以 Pulsar Assistant 软件为例进行介绍&#xff0c;Redisant 系列的其他软件同理&#xff0c;只需要根据不同软件修改下面命令中的软件名即可。 在 macOS 系统上安装 下载最新的.dmg包&#xff0c;双击打开安装程序&#xff0c;将软件拖动到下方的程序目录即可。 安装时报…

AWS Aurora Postgres 的开源替代品:存储和计算分离 | 开源日报 No.278

neondatabase/neon Stars: 13.0k License: Apache-2.0 Neon 是一个无服务器的开源替代品&#xff0c;用于 AWS Aurora Postgres。它将存储和计算分离&#xff0c;通过在节点集群中重新分配数据来替换 PostgreSQL 存储层。 提供自动扩展、分支和无限存储。Neon 安装包括计算节…

C#环境与数据类型

文章目录 C#环境.NET 框架集成开发环境 创建一个C#项目数据类型值类型引用类型对象类型object动态类型dynamic字符串类型string 指针类型 类型转换隐式转换显示转换&#xff08;强制转换&#xff09;C#提供的类型转换方法Convert类Parse方法TryParse方法 C#环境 .NET 框架 C#是…

pdf文件怎么转换为jpg图片?这几种转换方法操作起来很简单!

pdf文件怎么转换为jpg图片&#xff1f;在数字化洪流席卷职场的当下&#xff0c;PDF文档虽一度稳坐信息传输与储存的宝座&#xff0c;却逐渐显露出其在效率与便捷性追求中的疲态&#xff0c;随着技术疆界的不断拓宽&#xff0c;我们愈发深刻地意识到&#xff0c;PDF那复杂的格式…

逆向案例十八——某医药平台登录

网址&#xff1a;aHR0cHM6Ly91c2VyLjkxMTYwLmNvbS9sb2dpbi5odG1s 找到登陆包&#xff0c;发现用户和密码还有token都进行了加密 跟栈分析&#xff0c;进入第三个栈&#xff0c;找到加密位置。 找到加密位置&#xff0c;仔细分析。发现token$(#token).val(),根据之前的经验&…

Web开发:<div>标签作用

div作用 介绍基本用法特点和用途样式化示例嵌套示例与其他标签的对比总结 介绍 在Web开发中&#xff0c;<div> 标签是一个通用的容器元素&#xff0c;用于将HTML文档中的内容分组。它是一个块级元素&#xff0c;通常用于布局目的&#xff0c;因为它可以包含其他块级元素…

如何利用windows本机调用Linux服务器,以及如何调用jupyter界面远程操控

其实这篇文章没必要存在&#xff0c;教程太多了 参考博客&#xff08;1 2 3&#xff09;&#xff0c;如侵删 奈何网上的大神总是会漏掉一些凡人遇到的小问题 &#xff08;1&#xff09; 建议下载PuTTy for windows&#xff0c;从而建立与远程服务器的SSH连接 需要确认目标服…

【RAGFlow】Ubuntu系统下实现源码启动RAGFlow

一、RAGFlow 是什么&#xff1f; RAGFlow 是一款基于深度文档理解构建的开源 RAG&#xff08;Retrieval-Augmented Generation&#xff09;引擎。RAGFlow 可以为各种规模的企业及个人提供一套精简的 RAG 工作流程&#xff0c;结合大语言模型&#xff08;LLM&#xff09;针对用…

算法金 | 秒懂 AI - 深度学习五大模型:RNN、CNN、Transformer、BERT、GPT 简介

1. RNN&#xff08;Recurrent Neural Network&#xff09; 时间轴 1986年&#xff0c;RNN 模型首次由 David Rumelhart 等人提出&#xff0c;旨在处理序列数据。 关键技术 循环结构序列处理长短时记忆网络&#xff08;LSTM&#xff09;和门控循环单元&#xff08;GRU&#…

pg count 慢

因为count要遍历整个表来计数&#xff0c;导致pg的count缓慢&#xff0c;在生产环境中使用count甚至可能由于锁或者性能问题导致其他查询失败 在 PostgreSQL 中&#xff0c;预估影响数据量可以通过执行 EXPLAIN 或 EXPLAIN ANALYZE 语句来获取查询计划&#xff0c;并查看相关的…

平价养猫最值得入的主食冻干,希喂生骨肉冻干喂养测评

不少猫主人反映&#xff0c;自家的猫咪体型偏瘦&#xff0c;体质较弱&#xff0c;尤其是在季节变换时更易出现问题&#xff0c;如敏感、掉毛严重、食欲下降等。听说生骨肉冻干富含营养且易于吸收&#xff0c;能显著改善猫咪体质&#xff0c;便纷纷尝试。然而&#xff0c;未加甄…

如何优雅的处理字节类型数据

原文:赵侠客 前言 字节&#xff08;Byte&#xff09;是计算机信息技术用于计量存储容量的一种基本单位&#xff0c;通常简写为B,1Byte8bit,在ASCII编码中1Byte可以表示一个标准的英文字符&#xff0c;包括大写字母、小写字母、数字、标点符号和控制字符等&#xff0c;共128个不…

nginx前端部署配置

nginx前端部署配置 Nginx部署项目 1、yarn build打包Vue项目 2、打开nginx.conf文件,配置对应的信息 nginx.conf location / {root C:\Users\17542\Desktop\rrpject-v2\dist;root index.html index.htm;try_files $uri $uri/ router; //解决页面刷新404问题 } location…

艾迈斯欧司朗最新推出的DURIS® LED将引领柔性多变照明新时代

中国 上海&#xff0c;2024年7月15日——全球领先的光学解决方案供应商艾迈斯欧司朗&#xff08;瑞士证券交易所股票代码&#xff1a;AMS&#xff09;今日宣布&#xff0c;艾迈斯欧司朗最新推出的DURIS E 2835 LED&#xff0c;实现从封装工艺到出光性能的升级与创新。这款LED采…

(leetcode学习)9. 回文数

给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如&#xff0c;121 是回文&#xff0c;而…

PyQt5图形界面--基础笔记

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QToolTip, QLabel, QLineEdit from PyQt5.QtGui import QIcon, QFont, QPixmap import sys https://www.bitbug.net/ 将图片转换为ico格式, 用来更改打包的文件图标 -F 只产生exe文件, 其他临时文件不产生 -…