现代复制方案必须用 navigator.clipboard.writeText()（需 HTTPS/localhost 且用户手势触发），取文本用 textContent（纯文本）或 innerText（保留换行缩进），复制 HTML 需 clipboard.write() + Blob，选区复制需 Range/Selection + execCommand，注意兼容性与错误处理。
点击按钮复制指定 <div> 的文本内容（非 HTML）
直接用 document.execCommand('copy') 已被弃用，现代方案必须走 navigator.clipboard.writeText()。但该 API 要求页面处于安全上下文（https:// 或 localhost），且需用户手势触发（比如 click 事件内调用），否则会报 "Permission denied"。
实操建议：
- 用
document.getElementById('target-div').textContent提取纯文本——避免把标签、换行符、多余空格一并复制 - 若需保留换行和缩进，改用
innerText（更贴近视觉渲染结果），但注意它会忽略display: none元素 - 务必在
button的onclick或事件监听器里调用clipboard.writeText()，不能延后到setTimeout或异步回调中，否则失去“用户手势”上下文 - 加上
try/catch捕获拒绝权限或写入失败，例如clipboard.writeText() returns a Promise，失败时 reject
复制带格式的 HTML 片段（保留样式/结构）
如果目标是复制可粘贴到 Word、Notion 或富文本编辑器里的带样式的 HTML，就不能只取 textContent。得用 element.outerHTML 或 element.innerHTML，再通过 clipboard.write() 写入 text/html 类型数据。
注意点：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
clipboard.write()是较新 API，Safari 16.4+和Chrome 115+支持；旧版本需降级 fallback 到execCommand（仅限 document 有选区时） - 构造
ClipboardItem时，text/html类型必须传Blob，不能直接传字符串：new Blob([htmlString], {type: 'text/html'}) - 部分编辑器（如 Gmail）不识别
text/html，会退化为纯文本，所以建议同时提供text/plain备份项
选中范围后复制（模拟用户手动 Ctrl+C）
有些场景需要先高亮一段 DOM（比如代码块中的某几行），再点击按钮复制——这时不能靠 textContent，得真实创建选区（Range + Selection）。
关键步骤：
- 用
document.createRange()创建范围，range.selectNodeContents(element)或range.setStart/end(...)精确控制起止位置 - 用
window.getSelection().removeAllRanges()清空当前选区，再.addRange(range)加入新范围 - 随后调用
document.execCommand('copy')—— 此时复制的就是你选中的那部分，包括换行、缩进、甚至部分内联样式 - 复制完记得
removeAllRanges()，否则页面上会残留虚线选中效果
常见失败原因和调试线索
复制失败时，别急着重写逻辑，先看这几个信号：
- 控制台报
Uncaught (in promise) DOMException: Permission denied→ 页面不是 HTTPS/localhost，或调用不在用户点击事件回调内 - 粘贴出来是空或只有空白字符 → 检查
textContent是否为空，或元素本身被visibility: hidden/opacity: 0遮挡（textContent仍可读，但innerText可能返回空） - 复制了 HTML 标签但粘贴成乱码 →
Blob构造时没指定encoding，应加{type: 'text/html;charset=utf-8'} - 移动端点不动按钮 → 检查是否被
pointer-events: none或父容器overflow: hidden截断了事件冒泡
跨浏览器兼容性最棘手的其实是 Safari 对 clipboard.write() 的延迟支持，以及 iOS 上对 innerText 的怪异处理——真要覆盖全平台，得准备至少两套路径：现代 API 主力 + execCommand 保底 + 降级到 textarea 模拟选区。
