应使用 navigator.clipboard.writetext() 获取指定 div 的 textcontent 并同步触发，确保 https/localhost 环境及用户 click 手势；失败时降级 textarea+execcommand，并提供明确 ui 反馈。
点击按钮复制指定 <div> 内容，用 <code>navigator.clipboard.writeText() 最可靠
现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 16.4+）已原生支持 navigator.clipboard.writeText()，它能直接写入纯文本到系统剪贴板，无需依赖 document.execCommand()（已废弃）或 Flash。关键前提是：必须在用户手势触发的上下文中调用（比如 click 事件里），否则会抛出 "NotAllowedError"。
常见错误是把复制逻辑放在异步回调（如 setTimeout 或 fetch.then()）里——即使紧挨着 click 事件注册，只要不是同步执行，就大概率失败。
- 确保绑定在
button的click事件处理器中，且直接调用navigator.clipboard.writeText() - 获取目标容器内容推荐用
element.textContent（去标签纯文本）或element.innerText（渲染后文本，含样式影响）；避免用innerHTML，除非明确需要 HTML 字符串 - 记得加
try/catch——权限被拒、剪贴板繁忙或跨域 iframe 限制都会抛错，需提示用户手动复制备用方案
复制带格式的 HTML 内容？navigator.clipboard.write() + ClipboardItem 是唯一正解
如果目标容器含链接、加粗、换行等样式，且希望粘贴到 Word、Notion 或富文本编辑器时保留格式，就必须用 navigator.clipboard.write() 配合 ClipboardItem。它支持多类型数据（text/plain、text/html），但兼容性稍弱：Safari 目前不支持 ClipboardItem（仅支持纯文本写入）。
典型坑点：构造 ClipboardItem 时，new Blob([htmlString], {type: 'text/html'}) 的 htmlString 必须是完整 HTML 片段（含 或至少 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 标签），不能只是 "<strong>hello</strong>" —— 否则某些应用（如 Outlook）会忽略 HTML 版本，退回到纯文本。
- 务必同时提供
text/plain和text/html两种格式，确保降级可用 -
Blob的type字符串必须严格为'text/html'（小写，无空格），写成'text/HTML'会静默失败 - 移动端 Safari 会静默忽略
text/html，只保留纯文本；iOS 用户需接受这个现实
旧浏览器兜底：用 textarea + select() + document.execCommand('copy')
IE11、老版 Safari 或禁用 Clipboard API 的环境，只能退回传统方案：动态创建 textarea，填入内容，select() 它，再调用已废弃但尚存的 document.execCommand('copy')。注意该方法仅支持纯文本，且 execCommand 在 Chrome 92+ 已标记为 deprecated，未来可能移除。
容易漏掉的关键点：textarea 必须实际添加到 DOM（document.body.appendChild()），且不可被隐藏（visibility: hidden 不行，得用 position: absolute; left: -9999px 这类不影响布局的隐藏方式），否则 select() 失效。
- 设置
textarea的readOnly属性为false，否则部分浏览器无法选中 - 复制完立即
remove()临时textarea，避免内存泄漏和重复 DOM 节点 - 不要用
input替代textarea——input不支持换行，会丢失格式
权限与安全限制：为什么第一次点击没反应？
Chrome 和 Edge 从 2022 年起对剪贴板 API 加了更严格的权限控制：首次调用 navigator.clipboard.writeText() 会触发浏览器权限弹窗（“网站希望访问您的剪贴板”），用户拒绝后，后续调用会直接报错，且不会再次弹窗。Firefox 则默认允许，但可在 about:config 中关闭 dom.events.asyncClipboard。
这意味着你不能靠“静默复制”做自动化操作——所有复制行为必须由明确的用户点击触发，且第一次需用户授权。别试图用 clipboard.read() 做自动读取，那需要单独申请 'clipboard-read' 权限，且仅限于页面焦点状态下。
- 测试时清空浏览器权限记录（Chrome 设置 → 隐私设置 → 站点设置 → 权限 → 剪贴板 → 清除），避免被历史拒绝卡住
- 生产环境务必在
catch里提供清晰提示：“请允许剪贴板访问，或手动复制下方内容” - 不要在页面加载时预请求权限（
navigator.permissions.query({name:'clipboard-write'})），既无效又干扰用户体验
ClipboardItem 的完全不支持，以及移动端 iOS 的 HTML 复制静默降级。如果业务强依赖富文本粘贴，得提前告知用户平台限制，而不是指望 JS 自动兜底。
