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

相关推荐
青红光硫化黑9 分钟前
React-native之组件
javascript·react native·react.js
菠萝+冰11 分钟前
在 React 中,父子组件之间的通信(传参和传方法)
前端·javascript·react.js
海天胜景23 分钟前
vue3 el-select 默认选中第一个
前端·javascript·vue.js
小小怪下士_---_42 分钟前
uniapp开发微信小程序自定义导航栏
前端·vue.js·微信小程序·小程序·uni-app
页面魔术1 小时前
无虚拟dom怎么又流行起来了?
前端·javascript·vue.js
Mapmost1 小时前
【BIM+GIS】BIM数据格式解析&与数字孪生适配的关键挑战
前端·vue.js·three.js
汪子熙1 小时前
浏览器里出现 .angular/cache/19.2.6/abap_test/vite/deps 路径究竟说明了什么
前端·javascript·面试
林太白1 小时前
Nuxt3 功能篇
前端·javascript·后端
YuJie1 小时前
webSocket Manager
前端·javascript
Mapmost1 小时前
重磅升级丨Mapmost全面兼容3DTiles 1.1,3DGS量测精度跃升至亚米级!
前端·vue.js·three.js