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

实现效果图

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

解决方法(降版本)

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

### 在 Vue3 中使用 pdfh5 插件实现 PDF 在线预览 为了在 Vue3 项目中成功集成 `pdfh5` 并实现 PDF 文件的在线预览功能,可以按照以下方式操作: #### 安装依赖 首先需要安装 `pdfh5` 及其样式文件。可以通过 npm 或 yarn 进行安装。 ```bash npm install pdfh5 --save ``` 或者 ```bash yarn add pdfh5 ``` #### 导入组件与初始化 以下是完整的代码示例,用于加载并渲染 PDF 文件: ```javascript <template> <div class="pdf-container"> <!-- 提供一个容器 --> <div id="pdf-viewer" ref="refPdf"></div> </div> </template> <script setup> import { ref, onMounted } from 'vue'; import Pdfh5 from 'pdfh5'; // 引入核心库 import 'pdfh5/css/pdfh5.css'; // 引入默认样式表 const refPdf = ref(null); // 加载 PDF 的函数 const LoadPdf = (url) => { const pdfh5 = new Pdfh5(refPdf.value, { pdfurl: url, zoomMode: 'auto', // 自动缩放模式 }); // 绑定事件监听器 pdfh5.on('complete', (status, msg, time) => { console.log(`PDF 加载完成:状态 ${status},消息 ${msg},耗时 ${time}`); }); }; // 获取文档并通过 URL 创建对象链接 const getDocById = async (id) => { try { const res = await readPDF(id); if (res) { const blobUrl = window.URL.createObjectURL(new Blob([res])); LoadPdf(blobUrl); // 调用加载方法 } } catch (error) { console.error('获取文档失败:', error); } }; onMounted(() => { // 假设有一个固定的 ID 来测试 getDocById(12345); // 替换为实际的文档 ID }); function readPDF(id) { return fetch(`/api/get-pdf/${id}`) // 替换为实际 API 地址 .then((response) => response.arrayBuffer()) .catch((err) => { console.error('读取 PDF 失败:', err); }); } </script> <style scoped> .pdf-container { width: 100%; height: 80vh; } #pdf-viewer { width: 100%; height: 100%; } </style> ``` 上述代码实现了以下几个关键点: - 使用 `ref` 将 DOM 元素绑定到模板中的 `<div>` 上[^1]。 - 初始化 `Pdfh5` 对象,并传入目标 DOM 和配置参数。 - 当 PDF 加载完成后触发回调函数处理逻辑。 - 如果遇到白屏问题,则可能是因为插件版本不兼容或其他环境因素引起的[^2]。 #### 解决常见问题 如果页面显示空白而没有任何错误提示,可能是由于以下原因造成的: 1. **插件版本冲突** 确认当前使用的 `pdfh5` 版本是否支持最新浏览器特性以及 Vue3 生态系统的要求。 2. **API 返回数据异常** 检查服务器端返回的数据流是否正确编码为二进制格式。 3. **跨域请求限制** 若通过远程地址访问资源,请确保服务端已启用 CORS 支持。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值