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

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

实现效果图

解决方法(降版本)

javascript 复制代码
npm uninstall pdfh5
npm install [email protected]

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 [email protected]

彩蛋

领导:"我最烦听到的就是绝对、肯定、一定"

"好的,以后注意"

文档地址:

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

相关推荐
HED2 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪2 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴3 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中3 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木3 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ4 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了4 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
鱼樱前端4 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
开开心心_Every4 小时前
体积小巧的 Word 转 PDF 批量工具
pdf
一眼青苔4 小时前
切割PDF使用python,库PyPDF2
服务器·python·pdf