前端遇到pdf预览不生效的问题

前端遇到pdf预览不生效的问题1. Element UIel-upload缺少action属性现象控制台报Invalid prop: type check failed for prop action. Expected String, got Undefined原因Element UI 的 Upload 组件将action标记为必需 prop即使设置了:auto-uploadfalse手动处理上传也必须有这个属性。解决加个空字符串占位actionel-uploadaction:auto-uploadfalse:on-changeonFileChange/el-uploadVue HMR 导致方法重复定义现象 方法内部的 console.log 不执行但函数类型检查和调用都正常。折腾了半天才发现文件里有两个同名方法。原因 webpack-dev-server 的 HMR 热更新 component 时旧的方法没有被正确替换而是追加到了 methods 中。JavaScript对象不允许重复 key后定义的覆盖了前者。之前调试加的带日志的 renderPage 被旧的无日志版本覆盖了。教训 怀疑方法没被执行时先检查文件里有没有重复定义。编辑器折叠代码可能隐藏细节。pdfjs-dist 2.0.943 getViewport API 不兼容现象 PDF 加载成功pdf.numPages 73但 canvas 渲染后宽高为 NaN x NaN页面空白无报错。原因 新版 pdfjs 支持 page.getViewport({ scale: 1.5 }) 对象传参但 2.0.943 只能用位置参数 page.getViewport(scale,rotation)。传对象进去后 viewport 的 scale 字段变成了对象 {…}宽高计算得到 NaN。解决// 错误2.0.943不支持constviewportpage.getViewport({scale:1.5})// 正确constviewportpage.getViewport(1.5,0)Aspose.Words 不支持加载 PDF 文件现象 上传 PDF 后报 500堆栈显示 UnsupportedFileFormatException: Pdf format is not supported on this platform原因 Aspose.Words 24.12 JDK17 版只能输出 PDF不能读取 PDF。它的 Document 构造函数不支持 PDF 格式需要 .NET版本才行。而项目最初只有一个 /sign/convert 接口无论什么格式都走 Aspose 转换。解决 新增 /sign/upload 接口对 PDF 文件直接保存到磁盘返回路径非 PDF 才走 Aspose 转换。if(pdf.equals(ext)){// PDF 直接保存不转换resultPathinputFile.getAbsolutePath();}else{// 非 PDF 走 Aspose 转换FileoutputFilenewFile(convertedDir,pdfName);fileConverter.toPdf(inputFile,outputFile);resultPathoutputFile.getAbsolutePath();}签章前文件未上传到服务器现象 执行签章后端报 500 FileNotFoundException: 文件不存在原因 前端用 :auto-upload“false” 只在浏览器本地读取文件做 PDF 预览执行签章时仅传了文件名如aspose-test.pdf给后端。后端期望的是服务器本地路径自然找不到文件。解决 签章流程改为选择本地文件预览 → 点击执行签章 → 先通过 FormData 上传到 /sign/upload → 拿到服务器路径 →再调用签章接口。Babel 6 不支持可选链操作符 ?.现象 webpack 编译报错 SyntaxError: Unexpected token原因 项目使用 Babel 6.26 stage-2 预设不支持 ES2020 的可选链 ?.。解决 改用传统写法// 报错 ❌err.response?.data?.message// 兼容 ✅(err.responseerr.response.dataerr.response.data.message)||err.message