WebViewer(apryse) Node.js标注示例运行及保存功能异常求助

后端接口与文件写入排查 #

• 确认XFDF文件夹存在：手动检查项目根目录下是否有XFDF文件夹，若没有则直接创建，避免因路径不存在导致写入失败。
• 测试后端保存接口：用API调试工具发送POST请求到http://localhost:3000/save，请求Body携带xfdf（任意标注XML内容）和filename（比如test.xfdf）参数，观察XFDF文件夹是否生成对应文件。如果无文件，检查server.js中fs.writeFile的路径逻辑，确保使用path.join(__dirname, 'XFDF', filename)拼接正确路径，同时排查Node.js进程对该文件夹的写入权限（Linux/macOS可执行chmod -R 755 XFDF，Windows需取消文件夹只读属性）。
• 查看后端日志：启动服务时保持终端打开，点击保存按钮后观察终端是否有报错信息，比如文件写入错误、参数接收异常等。

前端请求与标注导出排查 #

• 浏览器控制台抓包：打开F12开发者工具的Network标签，点击保存按钮后查看是否有/save请求发送。若没有请求，检查前端代码中保存按钮的事件绑定，确认instance.exportAnnotations()方法是否正确调用（该方法返回Promise，需确保用await或.then()处理结果后再发起请求）。
• 检查请求参数：若请求已发送，查看请求的Form Data是否包含完整的xfdf内容和正确的filename，若参数缺失，排查前端代码中获取标注数据和文件名的逻辑是否有误。
• 查看前端错误日志：在Console标签中查看是否有JavaScript报错，比如WebViewer实例未正确初始化、导出标注时出现异常等。

依赖与环境排查 #

• 核对依赖版本：检查package.json中的依赖版本，确保express、cors等后端依赖与示例要求一致，可执行npm ci重新安装精确版本的依赖，避免版本不兼容问题。
• 跨域问题排查：若前端页面和后端服务端口不同，查看Console标签是否有跨域报错，检查server.js中的cors配置是否允许前端域名的请求，必要时修改cors()参数为具体允许的 origin。

内容的提问来源于stack exchange，提问作者Shiva