当前位置: 首页 > news >正文

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

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

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

实现效果图

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

解决方法(降版本)

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、真相大白

npm uninstall pdfh5
npm install pdfh5@1.4.2

彩蛋

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

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

http://www.lryc.cn/news/504859.html

相关文章:

  • docker login 出错 Error response from daemon
  • Web 身份认证 --- Session和JWT Token
  • UE5制作倒计时功能
  • Linux去除注释和空行
  • Elasticsearch 7.x入门学习-Spring Data Elasticsearch框架
  • 网络层IP协议(TCP)
  • 计算机视觉中的边缘检测算法
  • js 常用扩展方法总结+应用
  • 数据结构---图(Graph)
  • 前端解析超图的iserver xml
  • LocalForage 使用指南:统一管理 LocalStorage、WebSQL 和 IndexedDB
  • 代码随想录算法训练营第五天-哈希-242.有效的字母异位词
  • 学习maven(maven 项目模块化,继承,聚合)
  • KDD 2025预讲会:10位一作的论文分享与话题思辨|12月18日全天直播
  • 掌握特征提取:机器学习中的 PCA、t-SNE 和 LDA模型
  • JAVA基础:注释
  • 从源码构建安装Landoop kafka-connect-ui
  • 【自动驾驶】Ubuntu22.04源码安装Autoware Core/Universe
  • 使用Nexus3搭建npm私有仓库
  • OpenHarmony和OpenVela的技术创新以及两者对比
  • 【LeetCode每日一题】Leetcode 1071.字符串的最大公因子
  • 《C++:计算机视觉图像识别与目标检测算法优化的利器》
  • 大模型的构建与部署(2)——数据清洗
  • 试题转excel;word转excel;大风车excel
  • 微信小程序webview和小程序通讯
  • ChatGPT大模型 创作高质量文案的使用教程和案例
  • Vue Web开发(八)
  • element-ui实现table表格的嵌套(table表格嵌套)功能实现
  • 【考前预习】4.计算机网络—网络层
  • 【java】MDC