WPS 多维表格配合使用操作手册

高速公路危害点照片采集系统 — 前端表单 + WPS 云端存储方案

一、系统架构说明

form-wps.html
前端采集表单 → POST + Token → WPS AirScript
数据接收脚本 → WPS 多维表格
云端数据存储

工作原理

  1. 工人在浏览器中打开 form-wps.html 表单页面
  2. 填写位置信息（公里桩、百米数、方向、车道等）并上传照片
  3. 点击「提交记录」后，表单通过 Webhook API 将数据发送到 WPS
  4. WPS 中的 AirScript 脚本 接收数据，写入多维表格
  5. 照片以附件形式存储到表格的「照片」字段中
优势
数据实时同步到云端，多人可同时使用同一张表格，照片直接存储在 WPS 云空间，无需本地管理。

二、首次配置步骤（管理员）

第 1 步：创建 WPS 多维表格

  1. 打开 WPS Office，点击「新建」→「多维表格」
  2. 创建一个新的数据表，表名必须为 危害点记录
  3. 按以下结构设置字段：
    字段名称字段类型说明
    路线名称文本如"京沪高速"
    施工日期日期施工当天日期
    公里桩数字如 235
    百米数数字0-9
    上下行单选选项：上行、下行
    车道单选选项：超车道、行车道、应急车道
    序号数字同位置裂缝序号
    裂缝方向单选选项：横缝、纵缝
    米数数字精确到一位小数
    备注文本选填
    照片阶段单选选项：施工前、施工中、施工后
    照片附件存储上传的照片
    提交时间日期自动记录提交时间

第 2 步：创建 AirScript 脚本

  1. 在多维表格中，点击顶部菜单「脚本」→「AirScript 编辑器」
  2. 点击「新建脚本」，命名为「接收采集数据」
  3. 将脚本文件 airsript-script.js 的全部内容复制粘贴到编辑器中
  4. 点击「保存」

第 3 步：设置 Webhook 触发

  1. 在 AirScript 编辑器中，找到脚本的「触发设置」
  2. 将触发方式设置为 「外部调用」（Webhook）
  3. 系统会生成一个 Webhook URL 和一个 Token
  4. 复制并妥善保存这两个值
重要
Token 相当于密码，请妥善保管，不要分享给无关人员。

第 4 步：配置前端表单

  1. 用浏览器打开 form-wps.html 文件
  2. 在页面中找到「WPS 连接配置」区域
  3. 将 Webhook URL 粘贴到「Webhook URL」输入框
  4. 将 Token 粘贴到「Token」输入框
  5. 点击「测试连接」按钮
  6. 如果显示 「连接成功」，说明配置完成
验证方法
测试成功后，回到 WPS 多维表格，应该能看到一条序号为 999 的测试记录。确认数据正确后，可删除该测试记录。

三、分享给他人使用

方案 A：共享同一个 WPS 表格（推荐）

适合多人协作、数据汇总到同一张表格的场景。

步骤操作负责人
1在 WPS 多维表格中点击「分享」，生成分享链接或邀请协作者管理员
2将 form-wps.html 文件分发给其他使用者管理员
3将 Webhook URL 和 Token 告知其他使用者管理员
4其他人打开表单，填入 Webhook URL 和 Token，测试连接使用者
优点
数据集中管理，便于统计和导出；所有人看到同一个数据源。

方案 B：每人独立表格

适合每人管理自己的数据、互不干扰的场景。

注意
方案 B 数据分散，后续汇总较麻烦。建议仅在需要数据隔离时使用。

四、照片压缩参数对比

系统提供两个版本的表单，照片压缩策略不同：

WPS 版（form-wps.html）

最大分辨率
1920px
压缩目标
2 MB 以内
压缩策略
先限尺寸，再降质量
适用场景
照片上传到 WPS 云端
存储容量充足

浏览器版（form.html）

最大分辨率
600px
压缩质量
50%
单张大小
约 30-80 KB
适用场景
照片存储在浏览器本地
容量有限（50-200MB）
为什么 WPS 版压缩更大？
WPS 版照片上传到云端存储，不受浏览器本地存储容量限制，因此可以使用更高分辨率和质量，保证照片清晰度。浏览器版使用 localStorage/IndexedDB 存储，容量有限（约 50-200MB），压缩更小有利于存储更多照片。

WPS 版压缩流程

  1. 限制尺寸：将图片最大边限制为 1920px，保持宽高比
  2. 逐步降质：从 90% 质量开始，每次降低 10%，直到文件小于 2MB
  3. 兜底缩小：如果质量降到 10% 仍超过 2MB，则进一步缩小图片尺寸

五、注意事项

安全问题

风险说明建议
Token 泄露Webhook Token 相当于密码，泄露后任何人可以写入数据不要公开分享 Token；定期更换
CORS 限制浏览器直接打开 HTML 文件可能因跨域被阻止部署到 Web 服务器或使用本地服务器
数据篡改前端代码可被修改，可能提交虚假数据在 AirScript 中添加数据校验

使用限制

数据一致性

六、常见问题排查

问题可能原因解决方法
连接失败Token 错误或过期重新获取 Token 并更新配置
数据写入失败字段名称不匹配检查表格字段名是否与脚本一致
照片未上传表格对象获取失败确保表名是「危害点记录」
CORS 错误浏览器跨域限制部署到 Web 服务器
序号进度点不更新事件未绑定刷新页面，检查控制台报错
测试成功但实际提交失败照片过大或格式问题检查照片是否超过 2MB
部分成功部分失败某些字段类型不匹配查看同步日志中的详细错误
排查技巧
打开浏览器的开发者工具（F12），切换到「控制台」标签页，可以查看详细的错误日志和同步信息。

七、长期部署建议

1. 部署到 Web 服务器

2. Token 安全管理

3. 数据备份

4. 监控和日志