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

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

实现效果图

解决方法(降版本)

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还是看不到。这代码有毒吧,好端端的为啥就不能用了。

就在疑惑之际,控制台一行代码引起了我的注意

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

相关推荐
小信丶14 分钟前
解决 pnpm dev 报错:系统禁止运行脚本的问题
前端·vue.js·windows·npm
૮・ﻌ・21 分钟前
Vue3:组合式API、Vue3.3新特性、Pinia
前端·javascript·vue3
前端不太难21 分钟前
RN + TypeScript 项目越写越乱?如何规范架构?
前端·javascript·typescript
JS_GGbond29 分钟前
用美食来理解JavaScript面向对象编程
开发语言·javascript·美食
苏打水com40 分钟前
第十六篇:Day46-48 前端安全进阶——从“漏洞防范”到“安全体系”(对标职场“攻防实战”需求)
前端·javascript·css·vue.js·html
dagouaofei42 分钟前
全面整理6款文档生成PPT工具,PDF转PPT不再难
python·pdf·powerpoint
AY呀1 小时前
Vite:现代前端构建工具的革命与实战指南
前端·vue.js·vite
yesyesyoucan1 小时前
PDF全能处理站:压缩、拆分、合并一站式解决方案与核心技术解析
pdf
重铸码农荣光1 小时前
用AI把猫主子变成冰球猛将?我搞了个“宠物拟人化”神器,结果……它真敢打!
vue.js·低代码·coze
猿究院_xyz2 小时前
微信小程序与echarts联动安卓真机测试出现黑色阴影
前端·javascript·微信小程序·小程序·echarts