【无标题】

前端遇到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=""

html 复制代码

<el-upload action="" :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不支持）

javascript 复制代码

  const viewport = page.getViewport({ scale: 1.5 })

// 正确

javascript 复制代码

  const viewport = 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 转换。

java 复制代码

 if ("pdf".equals(ext)) {
      // PDF 直接保存，不转换
      resultPath = inputFile.getAbsolutePath();
  } else {
      // 非 PDF 走 Aspose 转换
      File outputFile = new File(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 的可选链 ?.。

解决：改用传统写法：

// 报错 ❌

javascript 复制代码

 err.response?.data?.message

// 兼容 ✅

javascript 复制代码

  (err.response && err.response.data && err.response.data.message) || err.message

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

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

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