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

相关推荐
阿正的梦工坊12 分钟前
JavaScript 微任务与宏任务完全指南
开发语言·javascript·ecmascript
2301_799073024 小时前
基于 Next.js + 火山引擎 AI 的电商素材智能生成工具实战——字节跳动前端训练营成果
javascript·人工智能·火山引擎
码喽7号4 小时前
Vue学习七:MockJs前端数据模拟
前端·vue.js·学习
RONIN6 小时前
VUE开发环境配置基础(构建工具→单文件组件SFC→css预处理器sass→eslint)及安装脚手架
vue.js
kyriewen116 小时前
项目做了一半想重写?这套前端架构让你少走3年弯路
前端·javascript·chrome·架构·ecmascript·html5
RONIN6 小时前
vue2、vue3区别之混入mixins和过滤器filter
vue.js
RONIN7 小时前
属性透传attribute、vue实例对象方法$nextTick()、虚拟dom与浏览器渲染机制
vue.js
RONIN7 小时前
vue自定义指令与自定义插件
vue.js
RONIN7 小时前
属性透传attribute与性能优化组件(component、异步组件、keep-alive/Suspense/Teleport/Transition)
vue.js
RONIN8 小时前
组件通讯(父传子、子传父、ref属性、表单双向绑定v-model、兄弟间传值Event Bus、插槽、依赖注入)
vue.js