html5剪贴板api通过navigator.clipboard.writetext()和readtext()实现安全异步复制粘贴，须在用户手势触发且https/localhost环境下使用；复制需封装错误处理，粘贴须在paste事件中preventdefault后立即调用；不支持时降级用execcommand；需提供友好反馈与防连点机制。
HTML5 剪贴板 API 提供了安全、标准的文本复制与粘贴能力，核心是 navigator.clipboard.writeText() 和 navigator.clipboard.readText() 两个异步方法。它们必须在用户主动触发（如点击、按键）且页面处于安全上下文（HTTPS 或 localhost）时才能正常工作。
复制文本：writeText() 的正确用法
调用 writeText() 必须包裹在用户手势事件中，不能在定时器、网络请求回调或页面加载时执行，否则会抛出 NotAllowedError。
- 函数需声明为 async，并使用 await 或 .then().catch() 处理 Promise
- 只接受字符串类型参数；传入对象、数字或 null 会触发
TypeError - 推荐封装成可复用函数，并统一处理成功/失败反馈：
try {
await navigator.clipboard.writeText(text);
return true;
} catch (err) {
if (err.name === 'NotAllowedError') {
// 用户未授权或非手势触发
} else if (err.name === 'SecurityError') {
// 非 HTTPS / localhost 环境
}
return false;
}
}
粘贴文本：readText() 的触发条件
读取剪贴板内容比复制更受限制——它只能在用户粘贴动作发生时调用，例如监听 paste 事件，不能在任意时刻主动拉取。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 必须在
event.preventDefault()后立即调用readText()，否则可能被浏览器拦截 - 同样需要 HTTPS 或 localhost 环境，且部分浏览器（如旧版 Safari）不支持
- 典型用法是监听全局 paste 事件，再将读取结果插入目标区域：
e.preventDefault();
try {
const text = await navigator.clipboard.readText();
document.getElementById('inputField').value += text;
} catch (err) {
console.warn('读取剪贴板失败:', err);
}
});
兼容性降级方案
对于不支持 Clipboard API 的环境（如 IE11、Safari ≤13.0、部分安卓 WebView），需回退到 document.execCommand('copy') 方案：
- 动态创建
textarea或input元素，设置value并插入document.body - 调用
.select()选中全部内容，再执行execCommand('copy') - 立即移除临时元素，避免 DOM 泄漏；注意
execCommand已废弃但仍是必要兜底手段 - 判断依据：检查
navigator.clipboard是否存在，且window.isSecureContext为 true
用户体验与错误反馈
复制/粘贴是异步操作，无视觉反馈会导致用户重复点击或误判失败。
- 按钮点击后应立即变更文案（如“复制中…”），成功后显示“已复制”，2 秒后恢复原文字
- 失败时不暴露技术细节（如“NotAllowedError”），改用友好提示：“复制失败，请重试”
- 建议禁用按钮 1.5–2 秒，防止连点；若需更高可靠性，可在 Promise 外加节流控制
- 对纯展示型文本，也可用 CSS
user-select: all实现一键全选，降低交互成本
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
