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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/937977.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习算法】——决策树之集成学习:Bagging、Adaboost、Xgboost、RandomForest、XGBoost

集成学习 **集成学习(Ensemble learning)**是机器学习中近年来的一大热门领域。其中的集成方法是用多种学习方法的组合来获取比原方法更优的结果。 使用于组合的算法是弱学习算法,即分类正确率仅比随机猜测略高的学习算法,但是组合之后的效果仍可能高于…

C/S软件授权注册系统(Winform+WebApi+.NET8+EFCore版)

适用软件:C/S系统、Winform桌面应用软件。 运行平台:Windows .NETCore,.NET8 开发工具:Visual Studio 2022,C#语言 数据库:Microsoft SQLServer 2012,Oracle 21c,MySQL8&#xf…

Big Model weekly | 第49期

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入! 01 Magnetic Preference Optimization: Achieving Last-iterate Convergence for Language Models Alignment 自我对弈方法在多个领域增强模型能力方面展现出了显著的成功。在基于人类反馈的强化学习&#xff0…

如何建设金融数据中心

目录 总则 概述 要求 基本原则 数据中心治理 概述 战略管控 战略规划 战略实施 延伸阅读 总则 概述 本文以描述金融数据中心的治理域内容为基础,从金融数据中心建设、运营及安全保障的角度出 发,逐一描述场地环境、网络通信、运行管理和风险管控等能力域的具体…

医学分割数据集B超图片肝脏分割数据集labelme格式271张1类别

数据集格式:labelme格式(不包含mask文件,仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数):271 标注数量(json文件个数):271 标注类别数:1 标注类别名称:["liver"] 每个类别标注的框数&#xf…

Android:展锐T760平台camera PDAF调试

一、平台PDAF流程 目前展锐平台主要支持Shield PD Sensor、Dual PD Sensor 1、Shield PD Sensor Type1相位差和信心度结果直接从Sensor输出,不经过平台算法库。 Type2Sensor端抽取PD信息, 放在一块buffer输出, PDAF算法库算出相位差和信心度。 Type3Sensor端直接输出将带有…

MySQL的历史和地位

秋招之后,开始深入学习后端开发知识啦。把学到的东西分享给大家最开心啦。就从MySQL开始吧。 首先说一下MySQL的历史和地位。主要是看一下我们为什么要学习,而不是说让我们学什么我们就学什么。 地位 这张图是我从DB-Engines截取的2024年12月最新的数据…

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现 最后设置首页的推荐模块,参考模板如下图所示。 一、首页热门推荐模块的实现 对于热门推荐模块,先有上面的小标题栏,这里的标题栏也有一个小图标,首先从“百度图库”中…

使用ENSP实现NAT(2)

一、NAT的类型 二、静态NAT 1.项目拓扑 2.项目实现 路由器AR1配置: 进入系统视图 sys将路由器命名为AR1 sysname AR1关闭信息中心 undo info-center enable 进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为192.168.10.254/24 ip address 192.168.10.254 24进…

【1211更新】腾讯混元Hunyuan3D-1文/图生3D模型云端镜像一键运行

目录 项目介绍 显存占用 11月21 新增纹理烘焙模块Dust3R 烘焙相关参数: AutoDL云端镜像 启动说明 标准模型下载 【1212更新】腾讯混元Hunyuan3D-1文图生3D模型云端镜像一键运行 项目介绍 https://github.com/Tencent/Hunyuan3D-1 腾讯混元 3D 生成模型,支持…

PHP 应用 ImageMagick

ImageMagick是什么? ImageMagick是一款功能强大、跨平台的图像处理软件。它可以读取、转换和输出大量的图片格式,支持各种各样的图像处理操作,如调整大小、旋转、加水印、格式转换等。在PHP中使用ImageMagick,可以让我们在web应用…

OpenCV圆形标定板检测算法findGrid原理详解

OpenCV的findGrid函数检测圆形标定板的流程如下: class CirclesGridClusterFinder {CirclesGridClusterFinder(const CirclesGridClusterFinder&); public:CirclesGridClusterFinder

阿里云服务器手动搭建WordPress【官方文档注意事项】

这是官方文档 注意事项 先配LNMP,我的上一篇文章到这里发现,没有基于ubuntu的教程,所以创建服务器时选择centos在官方文档第四步“下载WordPress,并移动至网站根目录”中,首先它让cd /usr/share/nginx/html&#xff…

vue运行项目时local有显示 但是network却显示unavailable

问题描述 日常开发中 和后端本地调试时 后端需要使用你的本地去访问页面 可运行项目时会出现network显示unavailable的情况 解决方式 1.其实这只是vue脚手架对于ip地址获取的方式兼容上有一些问题 但其实是不影响ip访问本地的 你可以直接cmd内ipconfig去查看自己的ip然后…

Go项目-----Kubernetes使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言基本概念kubectl工具部署web服务生成镜像编写deployment 编写service启动服务 k8s部署mysql编写pvc编写pv编写service 部署redis集成部署mysql和redis 前言 这…

SpringCloud无介绍快使用,sentinel注解@SentinelResource的基本使用(二十三)

TOC 问题背景 从零开始学springcloud微服务项目 注意事项: 约定 > 配置 > 编码IDEA版本2021.1这个项目,我分了很多篇章,每篇文章一个操作步骤,目的是显得更简单明了controller调service,service调dao默认安装ngi…

紫光展锐5G融云方案,开启云终端新时代

近年来,云终端凭借便捷、高效、高性价比的优势正逐步在各行各业渗透。研究机构IDC的数据显示,2024上半年,中国云终端市场总体出货量达到166.3万台,同比增长22.4%,销售额29亿元人民币,同比增长24.9%&#xf…

基于卷积神经网络的垃圾分类系统实现(GUI应用)

1.摘要 本文主要实现了一个卷积神经网络模型进行垃圾图像分类,为了提高垃圾分类模型的准确率,使用使用Batch Normalization层、使用早期停止策略来防止过拟合等方法来优化模型,实验结果显示最终优化后的模型准确率较高90%左右。最终&#xf…

【51单片机】蜂鸣器快速上手

‌51单片机蜂鸣器是一种将电信号转换为声音信号的器件,在51单片机开发板中常用于产生按键音、报警音等提示信号‌。 ‌蜂鸣器类型‌:蜂鸣器按驱动方式可分为有源蜂鸣器和无源蜂鸣器。有源蜂鸣器内部自带振荡源,只需接上直流电压即可持续发声&…

数据库入门

基本概念 数据库:DataBase简称DB,是一个用于存储和管理数据的仓库。 就像我们每天访问的网站Bilibili,OA、ERP和CRM等内部管理系统,以及我们每天使用的腾讯新闻和Tiktok应用程序一样,我们看到的数据实际上存储在数据库…