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

GG3M 项目贝叶斯更新与决策数学的具体落地应用

GG3M贝叶斯决策体系&#xff1a;基于贾子公理的跨领域反熵增智慧决策应用摘要&#xff1a; GG3M项目以贾子公理体系为底层支撑&#xff0c;独创“事实层-模型层-元模型层”层级化贝叶斯架构&#xff0c;实现了从参数优化到认知框架迭代的范式突破。该体系以系统长期反熵增演化为…...

[C语言]控制台扫雷游戏

用精简的代码&#xff0c;回顾数组、函数和游戏逻辑的核心应用。还记得Windows自带的扫雷吗&#xff1f;这次我们用C语言实现一个9x9的简易版&#xff0c;适合用来巩固函数封装、二维数组和随机数等知识点。1. 整体思路 扫雷的核心功能可以拆成几块&#xff1a; 打印菜单&#…...

intv_ai_mk11效果展示:中文古诗英译+文化注释+押韵风格选择(Shakespearean/Modern)

intv_ai_mk11效果展示&#xff1a;中文古诗英译文化注释押韵风格选择&#xff08;Shakespearean/Modern&#xff09; 1. 惊艳的中英古诗翻译能力 intv_ai_mk11在中文古诗翻译领域展现出令人惊叹的能力&#xff0c;不仅能准确传达原诗的意境&#xff0c;还能根据需求选择不同的…...

TPCH dbgen数据生成工具在Linux环境下的配置与实战

1. 环境准备&#xff1a;从零搭建TPCH测试环境 第一次接触TPCH dbgen工具时&#xff0c;我花了整整两天时间才搞明白所有依赖关系。这个工具虽然功能强大&#xff0c;但官方文档确实不够友好。下面把我踩过的坑都总结出来&#xff0c;让你能快速上手。 系统要求方面&#xff0c…...

3步掌握AntiMicroX:让游戏手柄变身全能控制中心

3步掌握AntiMicroX&#xff1a;让游戏手柄变身全能控制中心 【免费下载链接】antimicrox Graphical program used to map keyboard buttons and mouse controls to a gamepad. Useful for playing games with no gamepad support. 项目地址: https://gitcode.com/GitHub_Tren…...

即时通讯私有化,BeeWorks让每一次内网沟通都安全、安心、高效

BeeWorks以全维度安全防护体系为支撑&#xff0c;将安全设计深度融入每一项核心功能&#xff0c;让员工在日常办公中既能享受高效协同&#xff0c;又能全程守护企业核心数据安全。同时&#xff0c;规范的使用操作是发挥安全优势的关键&#xff0c;本文将重点介绍BeeWorks核心功…...

FPU 检测技术:从 8086 到 286 的演进与挑战跨越

【导语&#xff1a;本文围绕 FPU 检测技术展开&#xff0c;从 8086 到 286 及后续 CPU 的 FPU 检测工作原理进行深入探讨&#xff0c;揭示了技术演进中的变化、难点及实际应用情况&#xff0c;对理解早期计算机浮点运算相关技术有重要意义。】8086 时代 FPU 检测的独特设计在 8…...

Intv_AI_MK11跨平台开发体验:在Windows WSL2中无缝使用GPU进行模型调试

Intv_AI_MK11跨平台开发体验&#xff1a;在Windows WSL2中无缝使用GPU进行模型调试 1. 为什么选择WSL2进行AI开发 对于习惯Windows系统的开发者来说&#xff0c;直接使用Linux环境进行AI模型开发往往面临诸多不便。WSL2&#xff08;Windows Subsystem for Linux 2&#xff09…...

从《魔兽世界》到你的项目:拆解一个高可用的Unity Buff系统架构设计

从《魔兽世界》到你的项目&#xff1a;拆解一个高可用的Unity Buff系统架构设计 在MMO游戏的黄金时代&#xff0c;《魔兽世界》的Buff系统曾让无数玩家着迷——从圣骑士的光环到法师的变形术&#xff0c;每个效果背后都隐藏着精密的系统设计。如今&#xff0c;这些经过千万级用…...

终极指南:gh_mirrors/log/log构建流程解析:从CoffeeScript到Grunt自动化

终极指南&#xff1a;gh_mirrors/log/log构建流程解析&#xff1a;从CoffeeScript到Grunt自动化 【免费下载链接】log Console.log with style. 项目地址: https://gitcode.com/gh_mirrors/log/log 如何快速构建优雅的控制台日志工具&#xff1f;gh_mirrors/log/log项目…...