复制多行代码缩进丢失是因clipboard.writeText()会规范化空白符，应改用write()配合text/plain类型的Blob；提取代码需用code元素textContent并清理首尾空行；还需注意HTTPS、用户手势触发及目标编辑器兼容性。
复制多行代码时缩进丢失的常见原因
直接用 navigator.clipboard.writeText() 复制带换行和空格的字符串，浏览器默认会把连续空白符（尤其是制表符 \t）转成单个空格，或在粘贴到某些编辑器（如 VS Code 默认设置、记事本）时被自动修剪——这不是 JS 错误，而是剪贴板 API 对文本的“规范化”行为 + 目标应用的解析逻辑共同导致的。
writeText() 无法保留缩进？试试 write() 配合 ClipboardItem
现代浏览器（Chrome 66+、Edge 79+、Firefox 116+）支持更底层的 write() 方法，能传入 ClipboardItem，从而指定 MIME 类型为 text/plain 并确保原始空白符不被篡改：
async function copyCodeWithIndent(codeString) {
try {
const blob = new Blob([codeString], { type: 'text/plain' });
await navigator.clipboard.write([
new ClipboardItem({ 'text/plain': blob })
]);
} catch (err) {
console.error('复制失败:', err);
}
}
- 必须传
text/plain类型的Blob，不能用text/html或其他类型，否则缩进仍可能被破坏 -
codeString中需含真实换行符（\n）和制表符（\t），不能靠 CSSwhite-space: pre渲染后取 innerText —— 那会丢掉 \t - Firefox 对
ClipboardItem的支持较晚（v116 起），旧版本需降级回writeText()并接受缩进妥协
从 <pre><code> 区域提取带缩进的原始文本
别用 element.innerText —— 它会把所有空白合并；也别用 element.textContent —— 它保留 HTML 实体但可能混入注释或标签内空白。正确做法是：
- 定位到
<code>元素本身（不是外层<pre>） - 读取其
textContent，再用正则清理首尾空行，但保留中间所有 \t 和 \n：codeEl.textContent.replace(/^\s+|\s+$/g, '') - 如果代码块含 HTML 实体（如
<），需先用 DOM 解码：(new DOMParser()).parseFromString('<', 'text/html').documentElement.textContent
按钮点击后无反应？检查权限与上下文
navigator.clipboard 是受策略限制的 API，常见失败场景：
立即学习“前端免费学习笔记（深入）”；
- 页面未通过 HTTPS 或 localhost 提供服务 → 直接抛
SecurityError - 点击事件不是由用户手势（如
click、touchend）触发 → 比如在setTimeout里调用会失败 - 移动端 Safari 对
write()支持有限，建议降级逻辑中优先尝试write()，失败后再用writeText()+ 手动补 \t
最易被忽略的是：即使 write() 成功，粘贴到某些 IDE（如老版本 PyCharm）仍显示缩进异常——这通常不是前端问题，而是目标编辑器对剪贴板内容的 MIME 类型处理逻辑不同，此时只能提示用户手动开启「粘贴时保留缩进」选项。
