vue使用pdfh5.js插件,显示pdf文件白屏

server/2024/12/17 12:29:55/

pdfh5,展示文件白屏,无报错

  • 实现效果图
  • 解决方法(降版本)
  • 排查问题过程
    • 发现问题
    • 查找问题根源
      • 1、代码写错了?
      • 2、预览文件流的问题?
      • 3、pdfh5插件更新了,我的依赖包没更新?
      • 4、真相大白
    • 彩蛋

实现效果图

在这里插入图片描述在这里插入图片描述

解决方法(降版本)

javascript">npm uninstall pdfh5
npm install pdfh5@1.4.2

1、如果只想快速解决问题的,以下内容不看也可以。
2、如果降低版本还解决不了你的问题,那么耐心看一下,跟你遇到的问题是不是一致。

排查问题过程

发现问题

就在那么平静的一天,领导甩给一个项目并说到:“拉一下代码,跑起来,之后可能有新需求要在这个项目中加一下”。
我:“好的领导,我跑一下看看”
平静的一天生活就被打破了,拉代码,装依赖,npm i 哎嘿报错。yarn install 哎嘿又报错。cnpm install 依赖装好了。
npm run serve 我嘞个去报错。删依赖包,切换node版本…反正最终是装好了。

这可给我给我开心坏了,什么需求不就分分钟给他开发完了,敲bug,再改,再敲。直接一手npm run build,打包上线
美滋滋的生活就这样过了几个星期,某一天突然领导说开个会议:“看一下问题,生产环境的pdf怎么看不到了。”
我:“还真有人预览看协议去啊,那么多文字。”

查找问题根源

1、代码写错了?

pdf预览出问题了,肯定第一时间去找pdf展示的代码呗,打开页面一看八个月前提交。

在这里插入图片描述

这八个月前的代码谁也没动过啊,咋能突然不好使了,然后就排查pdf预览生成。
翻文档: pdfh5文档

在这里插入图片描述

2、预览文件流的问题?

仔细一看data:res,这是什么鬼,不应该是直接一个链接么?细看了一下,原来是两种方案啊,能拼接pdf地址,也能直接预览文件流。
领导说:“直接预览地址因为跨域,文件是放在另一个服务器的…(中间略过一万字),为了解决跨域,代码逻辑就是把pdf的url传给后端,后端转成文件流返回,然后data:res展示。”
这也没毛病啊,返回去继续看业务代码

在这里插入图片描述

难道是后端生成的流太大了解析不了?然后就开始了我的狡辩:“领导,这块压根就没动过,git提交记录都在,是不是后端加什么逻辑这块修改过?不是前端的问题吧…”
继续狡辩:“要不然你把咱这个项目的服务器放个pdf?不用文件流,看看行不行,绝对不是前端的问题”
领导一顿噼里啪啦敲代码,升上去了,哎嘿,pdfurl: “http://…git.pdf” 直接url还是看不到。这代码有毒吧,好端端的为啥就不能用了。
就在疑惑之际,控制台一行代码引起了我的注意

pdfh5_46">3、pdfh5插件更新了,我的依赖包没更新?

在这里插入图片描述

版本号、这个项目很早之前的,是不是插件更新了版本自己的太老,需要更新一下呢,去对比官方看看

在这里插入图片描述

没错啊,最新版本号,再去我的package.json看看

在这里插入图片描述

我嘞个去,这块咋是1.4.2呢,那咋控制台能是1.4.9呢,这俩为啥不一样。看node包里的pdfh5

在这里插入图片描述

艹 ****************************************************************

4、真相大白

javascript">npm uninstall pdfh5
npm install pdfh5@1.4.2

彩蛋

领导:“我最烦听到的就是绝对、肯定、一定”
“好的,以后注意”

文档地址:
pdfh5文档: https://gitee.com/gjTool/pdfh5


http://www.ppmy.cn/server/150895.html

相关文章

ChatGPT突然全球宕机,OpenAI致歉:并查明原因,正积极修复

ChatGPT突然全球宕机,OpenAI致歉:并查明原因,正积极修复 在 2024 年 12 月 12 日上午的北京时间时段内,ChatGPT突发全球宕机,OpenAI致歉:已查明原因,正积极修复 官方证实了其备受瞩目的聊天机器…

MySQL函数—合计统计函数

在MySQL中,你可以使用合计统计函数来计算某个列的合计值、平均值、最大值、最小值等。这些合计统计函数包括SUM、AVG、MAX、MIN等。 下面是一些常用的合计统计函数的示例: SUM函数:用于计算某个列的合计值。 SELECT SUM(column_name) FROM…

31.攻防世界php_rce

进入场景 不是,这是个啥啊 index.php?sindex/think\app/invokefunction&functioncall_user_func_array&vars[0]system&vars[1][]whoami index.php?sindex/think\app/invokefunction&functioncall_user_func_array&vars[0]system&vars[1]…

力扣69. x 的平方根

给你一个非负整数 x ,计算并返回 x 的 算术平方根 。 由于返回类型是整数,结果只保留 整数部分 ,小数部分将被 舍去 。 注意:不允许使用任何内置指数函数和算符,例如 pow(x, 0.5) 或者 x ** 0.5 。 示例 1:…

51单片机--- 串口控制仿真

51单片机--- 串口控制仿真 实验目标:51单片机接收串口数据,根据数据点亮LED。 实验步骤: 在Proteus里画出原理图 在Keil里用C语言编写程序 在Proteus中导入HEX文件,启动仿真 实验协议: 波特率115200 数据位:8位,停止位:1位,校验位:无。 命令格式: 一条命令为…

【机器学习】机器学习的基本分类-强化学习(Reinforcement Learning, RL)

强化学习(Reinforcement Learning, RL)是一种基于试错的方法,旨在通过智能体与环境的交互,学习能够最大化累积奖励的策略。以下是强化学习的详细介绍。 强化学习的核心概念 智能体(Agent) 执行动作并与环境…

Linux服务器离线安装unzip包

Linux服务器离线安装unzip包 1. 安装unzip包的目的 解压Docker部署包和服务部署包。 2. 查看当前环境是否已经安装unzip rpm -qa | grep --color unzip3. 下载对应的离线包 地址:http://www.rpmfind.net/linux/rpm2html/search.php?query&submitSearch 例…

【moviepy】编程实现给视频添加字幕

为了实现给视频添加字幕的功能,并能够设置字体、颜色、坐标以及起始帧的位置,你可以使用Python的moviepy库。这个库可以处理视频剪辑,包括向视频中添加文本。 首先,你需要安装moviepy库。如果你还没有安装它,可以通过…