前端遇到pdf预览不生效的问题-酒店常州论坛

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

1. Element UI`<el-upload>`缺少`action`属性

现象：控制台报Invalid prop: type check failed for prop "action". Expected String, got Undefined

原因：Element UI 的 Upload 组件将action标记为必需 prop，即使设置了:auto-upload="false"
手动处理上传，也必须有这个属性。

解决：加个空字符串占位action=""

<el-uploadaction="":auto-upload="false":on-change="onFileChange"></el-upload>

Vue 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不支持）

constviewport=page.getViewport({scale:1.5})

// 正确

constviewport=page.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 直接保存，不转换resultPath=inputFile.getAbsolutePath();}else{// 非 PDF 走 Aspose 转换FileoutputFile=newFile(convertedDir,pdfName);fileConverter.toPdf(inputFile,outputFile);resultPath=outputFile.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.response&&err.response.data&&err.response.data.message)||err.message

企业官网建设流程全解析