ComPDF预览本地正常,部署后白屏:检查资源、路径和许可

本地能打开PDF,部署到/portal/后只剩空白区域。排查时需要分别确认:ComPDF运行资源是否存在、PDF能否读取、容器是否可见、许可是否适用。

200响应也可能是错误资源

在浏览器网络面板重新加载页面,检查SDK资源与PDF请求的地址、Content-Type和响应内容。单页应用可能把不存在的资源回退成index.html,此时状态是200,内容却不是脚本或PDF。

资源404或返回HTML,先修正发布目录和路由回退。PDF返回401、403,则检查用户权限或临时地址是否失效。两类问题需要分别处理。

对齐运行资源和path

ComPDF Web SDK的运行文件需要随应用发布。React集成包含资源复制步骤;部署说明用于核对当前版本的运行目录与配置。

本篇以应用部署在/portal/为例,实际SDK资源位于/portal/webviewer/,初始化地址就应与这个部署结果匹配。构建工具的base、静态文件复制目录与SDK的path不是同一个设置。检查构建产物和浏览器实际请求,不只检查源码里的路径。

先用固定教学PDF跑通,再接业务下载接口。这样能把SDK部署与业务授权问题分开定位。

请求正常后,检查布局与许可

确认容器有明确宽高。弹窗未展开或父节点高度为0时,阅读器可能已加载,页面却没有显示空间。检查从隐藏到显示、窗口缩放后的布局。

许可错误单独记录,并核对产品、版本和部署条件。不要把每种失败都显示成"PDF损坏",也不要把开发环境可用直接当成正式域名可用。

本次子路径构建结果

本次用React 19.2.0、Vite 7.1.9和ComPDF Web SDK 2.9.4构建教学工程,将base设为/portal/,运行资源实际位于该路径下的webviewer/。浏览器访问子路径后成功显示两页教学文件。

这个结果只验证该版本与本地教学部署。正式域名的许可、代理和业务下载接口仍要分别核对,不能由本地成功推断线上环境已经通过。

留下一份可复查的部署记录

不要只写"部署已修好"。记录构建工具版本、SDK版本、应用base、实际资源目录、打开文件地址与重开结果。资源请求返回HTML时,记录响应类型与内容;许可失败则保留对应错误,不能混成同一个"白屏"原因。

图:本轮教学输入的实际检查结果;适用范围与未通过项见正文。

用实际访问方式检查

覆盖根路径、子路径、直接刷新路由、登录失效和错误文件。每次核对页面标题、PDF首页与下载对象,确认都属于同一文档。

部署记录至少留下SDK版本、资源目录、访问路径及错误信息,方便升级后复查。准备正式集成时,可先通过Web SDK核对所需功能和授权条件;先跑通目标环境,再评估替换现有预览方案的成本。

相关推荐
LucianaiB1 小时前
【元宝搜索开发者征文大赛】AI时代,学得慢就不用学?用元宝搜索打造一个教程保质期,确保每一个教程符合你的现状
前端·人工智能·ai编程
excel1 小时前
JavaScript 对象池:减少高频对象创建与 GC 压力
前端
陈随易3 小时前
纯 Go 写的 JS 引擎,跑分超过了 C 语言的 QuickJS
前端·后端·程序员
子兮曰4 小时前
Chrome 权限元素实战:144 与 151 的渐进增强写法
前端·javascript·chrome
IT_陈寒5 小时前
Redis连接池泄漏那次,我差点把生产环境搞崩了
前端·人工智能·后端
强尼银手5 小时前
我花一天做了个格斗游戏原型,判定全对,然后被「美术」劝退了
前端·javascript
石小石Orz5 小时前
AI 正在蚕食我们的编码能力
前端·后端·算法
陈随易5 小时前
专注飞机 FocusFlight,两个人把番茄钟做成了一趟航班
前端·后端·程序员
总要学点什么6 小时前
第98篇:三维特效-材质线效果——给一条线换十种材质,虚线的图案只填了一半
开发语言·前端·javascript·ecmascript·gis·webgl·材质
10share6 小时前
基于大模型的 i18n 方案:把中文原文当 Key,轻松搞定多语言维护
前端·vue.js