如何用JavaScript实现带样式的网页文本复制功能？

你的核心问题是原代码仅克隆了选中内容的DOM结构，但没有提取并应用计算后的样式到内联属性中，Word粘贴时依赖带内联样式的HTML才能还原视觉效果。以下是修改后的实现方案：

完整代码实现 #

function copySelectedToClipboard() {
  // 获取选中范围和内容
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;
  
  const range = selection.getRangeAt(0);
  const clonedContent = range.cloneContents();
  
  // 遍历所有元素，将计算样式转为内联样式
  const applyInlineStyles = (element) => {
    if (element.nodeType !== Node.ELEMENT_NODE) return;
    
    // 获取元素的计算样式
    const computedStyle = window.getComputedStyle(element);
    // 提取需要保留的样式属性（可根据需求扩展）
    const stylesToKeep = [
      'color', 'background-color', 'font-size', 'font-weight',
      'text-decoration', 'font-family', 'line-height'
    ];
    
    stylesToKeep.forEach(prop => {
      const value = computedStyle.getPropertyValue(prop);
      if (value) {
        element.style.setProperty(prop, value);
      }
    });
    
    // 递归处理子元素
    Array.from(element.children).forEach(applyInlineStyles);
  };
  
  // 处理克隆内容里的所有元素
  Array.from(clonedContent.children).forEach(applyInlineStyles);
  
  // 创建临时容器，生成带内联样式的HTML
  const tempSpan = document.createElement('span');
  tempSpan.appendChild(clonedContent);
  const htmlWithStyles = tempSpan.innerHTML;
  
  // 将内容写入剪贴板，指定text/html格式
  navigator.clipboard.write([
    new ClipboardItem({
      'text/html': new Blob([htmlWithStyles], { type: 'text/html' }),
      'text/plain': new Blob([selection.toString()], { type: 'text/plain' })
    })
  ]).then(() => {
    console.log('复制成功，样式已保留');
  }).catch(err => {
    console.error('复制失败:', err);
  });
}

关键改进点 #

• 提取计算样式转为内联样式：通过getComputedStyle获取元素实际渲染的样式，将核心视觉样式（颜色、背景、字体等）写入元素的style属性，确保Word能识别这些样式。
• 支持多种剪贴板格式：同时写入text/html和text/plain格式，兼容不同粘贴场景，Word会优先使用HTML格式还原样式。
• 递归处理子元素：确保选中内容里的所有嵌套元素（比如链接、span标签）都能被处理到样式。
• 保留链接属性：原DOM中的<a>标签及其href属性会被保留，粘贴到Word后链接依然可点击。

使用方式 #

将函数绑定到按钮点击或其他触发事件：

document.getElementById('copyBtn').addEventListener('click', copySelectedToClipboard);

注意事项 #

• 部分浏览器需要在HTTPS环境下才能使用navigator.clipboardAPI，本地测试可使用localhost。
• 可根据实际需求扩展stylesToKeep数组，添加更多需要保留的样式属性（比如text-align、padding等）。

内容的提问来源于stack exchange，提问作者Obinna Iloeje