当前位置: 首页 > 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

相关文章:

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

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

docker login 出错 Error response from daemon

在自己的Linux服务器尝试登陆docker出错 输入完用户密码之后错误如下: 解决方案 1.打开daemo文件: vim/etc/docker/daemon.json 2.常用的国内Docker 镜像源地址 网易云 Docker 镜像:http://hub-mirror.c.163.com 百度云 Docker 镜像&#x…...

Web 身份认证 --- Session和JWT Token

Web 身份认证 --- Session和JWT Token 方法一: 通过使用Session进行身份认证方法二: 通过JWT token进行身份认证什么是JWTJWT完整流程JWT攻防JWT 如何退出登录JWT的续签 方法一: 通过使用Session进行身份认证 用户第一次请求服务器的时候,服务器根据用户提交的相关信…...

UE5制作倒计时功能

设置画布和文本 文本绑定 格式化时间 转到事件图表,计算时间,时间结束后面的事件可以按自己需求写 进入关卡蓝图,添加倒计时UI...

Linux去除注释和空行

平时查看某些配置文件的时,我们会发现有很多注释(如:"#"开头的行),中间还有很多空行,看起来非常费劲,所以在这里总结下如何去除注释和空行的方法。 举例说明 这里选个简单点的文件&a…...

Elasticsearch 7.x入门学习-Spring Data Elasticsearch框架

1 Spring Data框架 Spring Data 是一个用于简化数据库、非关系型数据库、索引库访问,并支持云服务的开源框架。其主要目标是使得对数据的访问变得方便快捷,并支持 map-reduce 框架和云计算数据服务。 Spring Data 可以极大的简化 JPA的写法,…...

网络层IP协议(TCP)

IP协议: 在了解IP协议之前,我们市面上看到的"路由器"其实就是工作在网络层。如下图: 那么网络层中的IP协议究竟是如何发送数据包的呢? IP报头: IP协议的报头是比较复杂的,作为程序猿只需要我们重…...

计算机视觉中的边缘检测算法

摘要: 本文全面深入地探讨了计算机视觉中的边缘检测算法。首先阐述了边缘检测的重要性及其在计算机视觉领域的基础地位,随后详细介绍了经典的边缘检测算法,包括基于梯度的 Sobel 算子算法、Canny 边缘检测算法等,深入剖析了它们的…...

js 常用扩展方法总结+应用

文章目录 js 常用扩展方法总结扩展方法应用选择大型项目 中扩展方法应用选择小型项目中 扩展应用 js 常用扩展方法总结 函数原型(prototype)扩展方法 介绍:在JavaScript中,通过修改函数的prototype属性可以为该函数创建的所有对象…...

数据结构---图(Graph)

图(Graph)是一种非常灵活且强大的数据结构,用于表示实体之间的复杂关系。在图结构中,数据由一组节点(或称为顶点)和连接这些节点的边组成。图可以用于表示社交网络、交通网络、网络路由等场景。 1. 基本概…...

前端解析超图的iserver xml

前端解析超图的iserver xml const res await axios.get(url)const xmlDom new DOMParser().parseFromString(res.data, text/xml);// 获取versionconst version xmlDom.getElementsByTagNameNS(*, ServiceTypeVersion)[0].textContent// 获取layerconst layerDom xmlDom.ge…...

LocalForage 使用指南:统一管理 LocalStorage、WebSQL 和 IndexedDB

前言 在前端开发中,客户端数据存储是一个至关重要的环节。无论是用户偏好设置、缓存内容,还是表单数据,都需要一个高效、可靠的存储方案。浏览器原生提供的 LocalStorage、SessionStorage 和 IndexedDB 等 API 虽然功能强大,但使…...

代码随想录算法训练营第五天-哈希-242.有效的字母异位词

这道题的总体感觉不是很难&#xff0c;但是其完成的思想还是很有趣的利用数据下标来代表字母序列然后遍历两个字符串每个字符&#xff0c;给对应字母下标的数组中一个自增&#xff0c;另一个自减通过查看最后的数组内容是不是0&#xff0c;来判断是不是异位词 #include <io…...

学习maven(maven 项目模块化,继承,聚合)

前言 本篇博客的核心&#xff1a;理解maven 项目模块化&#xff0c;继承&#xff0c;聚合 的含义 maven 项目模块化 含义 maven项目模块化&#xff1a;使用maven 构建项目&#xff0c;管理项目的方式&#xff0c;我们可以将maven项目根据内在的关系拆分成很多个小项目【模块】…...

KDD 2025预讲会:10位一作的论文分享与话题思辨|12月18日全天直播

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 圆桌思辨&#xff1a;一作们的KDD 2025投稿经验分享与热点探讨 1. KDD 2025 与往年相比有哪些新变化&#xff1f;两次投稿周期的新规则有哪些影响&#xff1f; 2. 第一篇KDD的工作是如何成功被接收的&#xff1…...

掌握特征提取:机器学习中的 PCA、t-SNE 和 LDA模型

文章目录 一、说明二、既然有 PCA 技术降维&#xff0c;为什么还要学习 t-SNE&#xff1f;2.1 t-SNE的核心思想&#xff1a;2.2 保持点之间的局部关系有什么意义&#xff1f;2.3 t-SNE 的几何直觉&#xff1a; 三、t-SNE 的数学公式&#xff1a;四、目标函数&#xff1a;五、梯…...

JAVA基础:注释

JAVA基础:注释 作用 使得代码中的一段文本不被执行,起到解释说明的作用。 分类 JAVA中的注释有三种: 单行注释 //单行注释多行注释 /* 多 行 注 释 */文档注释 /***@deprecated comments* @author lhy*/文档注释可以添加一些参数作为说明。 有趣的代码注释 卡车/* * *…...

从源码构建安装Landoop kafka-connect-ui

背景 部署Landoop kafka-connect-ui最简单的办法还是通过docker来部署&#xff0c;我们之前的kafka-connect-ui就是通过docker部署的&#xff0c;但是&#xff0c;最近发现个问题&#xff1a;当使用docker部署且防火墙使用的是firewalld的情况下&#xff0c;就会出现端口冲突。…...

【自动驾驶】Ubuntu22.04源码安装Autoware Core/Universe

【自动驾驶】Ubuntu22.04源码安装Autoware Core/Universe 官方源码安装教程前置条件安装ROS2 Humble安装Autoware Core/Universe配置开发环境配置工作空间设置控制台 官方源码安装教程 链接&#xff1a;https://autowarefoundation.github.io/autoware-documentation/main/ins…...

使用Nexus3搭建npm私有仓库

一、npm介绍 npm的全称是Node Package Manager&#xff0c;它是一个开放源代码的命令行工具&#xff0c;用于安装、更新和管理Node.js模块。npm是Node.js的官方模块管理器&#xff0c;它允许用户从一个集中的仓库中下载和安装公共的Node.js模块&#xff0c;并将这些模块集成到…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...