1.2 KiB
1.2 KiB
08 - 剪贴板集成(读取 / 粘贴 / 降级)
功能目标
- 支持 Ctrl+V 粘贴文本/文件到传输区域。
- 支持按钮主动读取系统剪贴板文本(在权限允许的情况下)。
- 在权限受限或浏览器不支持时提供清晰降级提示。
前端(Vue)
- 粘贴事件处理
- 监听
paste,遍历e.clipboardData.items:kind=file:提取 File,走文件传输流程kind=string && type=text/plain:提取文本,填充输入框或直接发送
- 监听
- 主动读取剪贴板
navigator.clipboard.readText():读取文本并 emittext-pasted- 失败提示:“无法读取剪贴板,请手动粘贴”(常见于非 HTTPS、权限未授予、浏览器策略限制)
- 组件建议
FileDropZone.vue:承载粘贴与读取按钮utils/clipboard.js:封装权限判断与异常处理(便于复用)
后端(Spring Boot)
- 无需专门接口支持;剪贴板只影响前端如何生成
TEXT/FILE消息。
边界与注意点
- HTTPS/权限:
navigator.clipboard通常要求安全上下文(HTTPS/localhost)与用户手势。 - 可用性:粘贴是最稳妥的降级方式,读取按钮只是增强能力。