主 题
工具箱精选 · 2/3
在线体验：/tool/pdf-h5 · 桌面 PDF 查看另见 /tool/pdf
解决什么问题
移动端常见「阅读协议 → 必须滚到底 → 倒计时 → 手写签名」流程。本页用纯前端演示完整链路，方便产品/前端联调，不必先接真实 CA。
功能清单
- 默认示例保证书 PDF，或本地上传 /
?file=?title= - 手机壳布局预览（窄屏自适应）
- 滚至底部 + 10 秒倒计时后才可签
- 手写签名，叠加印章与日期，下载「已签署协议.pdf」
技术实现
前端
| 项 | 说明 |
|---|---|
| 页面 | pages/tool/pdf-h5.vue |
| 组件 | xia-agreement-sign（:pdf-src :second="10" @success） |
| 本地文件 | URL.createObjectURL；卸载时 revokeObjectURL |
| 成功回调 | downloadFile(blobUrl, '已签署协议.pdf') |
无 Nest 接口：签署结果不出站，适合演示与自测。真商用需另接意愿核验、证书与存证。
与 /tool/pdf 的区别
| pdf-h5 | ||
|---|---|---|
| 场景 | 移动协议签署演示 | 桌面查看/签署能力 |
| UI | 手机框 + 倒计时强制阅读 | 更偏桌面阅读器 |
使用教程
- 打开 /tool/pdf-h5
- 用示例或上传自己的 PDF
- 在手机框内滚到文末，等倒计时结束
- 手写签名 → 自动下载已签文件
优化记录
- 支持 URL 参数换文档，便于嵌到业务「预览签署」页
ClientOnly包裹签署组件，避免 SSR 画布问题
小结
把合规产品里难演示的交互做成可点的工具页；实现重心在组件与 UX，不在后端。真上线再换存证链路即可。
全部评论(0)