当前位置: 首页 > 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;并将这些模块集成到…...

基于S7-200 PLC与组态王技术的温室大棚控制方案:包含梯形图原理图、IO分配及组态画面详解

基于S7-200 PLC和组态王温室大棚控制 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面菜农张叔上周还给我打电话吐槽&#xff1a;“小王啊&#xff0c;上周那场降温加突然转晴&#xff0c;我三点爬起来盖半层棉被…...

RAG系统的需求分析

这个是一个基于私有知识库的智能对话平台&#xff0c;允许用户上传文档构建专属知识库&#xff0c;并通过自然语言交互的方式查询和获取知识。它结合了大语言模型和向量检索技术&#xff0c;让用户通过对话的形式与自己的知识库进行高效交互应用场景个人用户场景:学习助手&…...

杨立昆新模型杀疯了,1500万参数单GPU就能碾压大厂?

就在前几天&#xff0c;AI教父、图灵奖得主杨立昆刚发了个新模型&#xff0c;名叫LeWorldModel&#xff0c;论文一发出&#xff0c;整个圈子瞬间炸锅。说出来你们可能都不信——这货只有1500万参数&#xff0c;单块GPU几个小时就能训完&#xff0c;随便一个研究者都拉起来跑一遍…...

5分钟精通B站音频提取:从新手到高手的开源工具实战指南

5分钟精通B站音频提取&#xff1a;从新手到高手的开源工具实战指南 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirrors/…...

Phi-4-mini-reasoning开源模型优势:轻量级+高精度+低GPU资源占用实测

Phi-4-mini-reasoning开源模型优势&#xff1a;轻量级高精度低GPU资源占用实测 1. 模型概述 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理数学题、逻辑题、多步分析和简洁结论输出。与通用聊天模型不同&#xff0c;它采用了"题目输…...

用51单片机定时器做一个多功能秒表:代码详解如何整合数码管、按键与中断

51单片机多功能秒表开发实战&#xff1a;从模块整合到系统思维进阶 在嵌入式开发领域&#xff0c;能够独立完成一个功能完整的综合项目&#xff0c;往往是区分初学者与进阶开发者的关键分水岭。今天&#xff0c;我们将以51单片机为核心&#xff0c;打造一个具有启动/暂停、清零…...

保姆级避坑指南:在Ubuntu 22.04上为ROS2 Humble编译OpenCV 4.2.0和cv_bridge

深度解析&#xff1a;Ubuntu 22.04下ROS2 Humble与OpenCV 4.2.0的精准版本匹配实战 当视觉SLAM遇上ROS2生态&#xff0c;版本依赖就像一场精密的外科手术。本文将带你穿透ORB-SLAM3等视觉算法与ROS2 Humble环境整合时的核心痛点——特别是OpenCV 4.2.0与cv_bridge的版本锁定机…...

从零构建32位MIPS单周期处理器:Logisim实战与24条核心指令实现详解

1. 从零理解MIPS单周期处理器 第一次接触CPU设计时&#xff0c;我盯着教科书上的数据通路图看了整整三天——那些密密麻麻的连线和缩写让我头晕目眩。直到用Logisim动手搭建了一个最简单的加法器&#xff0c;才突然明白处理器不过是精心设计的电子积木。单周期MIPS处理器就像乐…...

无损视频剪辑效率全攻略:5分钟掌握革新性剪辑技术

无损视频剪辑效率全攻略&#xff1a;5分钟掌握革新性剪辑技术 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 你是否曾因视频剪辑软件的漫长渲染过程而错失发布良机&a…...

OpenTiny NEXT 前端智能化系列直播征文开启,带你系统学习 AI 前端与 WebAgent

&#x1f525;个人主页&#xff1a;杨利杰YJlio❄️个人专栏&#xff1a;《Sysinternals实战教程》《Windows PowerShell 实战》《WINDOWS教程》《IOS教程》《微信助手》《锤子助手》 《Python》 《Kali Linux》《那些年未解决的Windows疑难杂症》&#x1f31f; 让复杂的事情更…...