React实现Excel粘贴单元格格式：如何识别xl类以保留粗体等样式？

核心问题在于Excel复制生成的xlxx类名是动态分配的——单独样式时类名会重复，但对应的样式规则其实包含在剪贴板HTML的<style>标签里。你需要解析完整的HTML内容，提取样式规则来映射类名到具体样式，而非硬编码类名与样式的对应关系。

步骤1：解析剪贴板完整HTML，提取样式映射 #

修改粘贴处理函数，先获取完整HTML文本，再用DOMParser解析并提取<style>中xlxx类的样式规则：

const handlePaste = async (event: React.ClipboardEvent) => {
  event.preventDefault(); // 阻止默认粘贴，避免干扰自定义处理
  const clipboardContents = await navigator.clipboard.read();
  
  let textHtml = '';
  for (const item of clipboardContents) {
    if (item.types.includes('text/html')) {
      const blob = await item.getType("text/html");
      textHtml = await blob.text();
      break;
    }
  }

  if (!textHtml) return;

  // 解析HTML文档
  const parser = new DOMParser();
  const doc = parser.parseFromString(textHtml, 'text/html');

  // 构建xl类到样式的映射表
  const xlClassStyles: Record<string, {
    isBold: boolean,
    isItalic: boolean,
    hasUnderline: boolean
  }> = {};

  // 遍历所有样式表，提取xl类的规则
  Array.from(doc.styleSheets).forEach(sheet => {
    try {
      Array.from(sheet.cssRules).forEach(rule => {
        if (rule instanceof CSSStyleRule && rule.selectorText?.startsWith('.xl')) {
          const className = rule.selectorText.slice(1);
          const style = rule.style;
          xlClassStyles[className] = {
            isBold: style.fontWeight === 'bold' || style.fontWeight === '700',
            isItalic: style.fontStyle === 'italic',
            hasUnderline: style.textDecoration.includes('underline')
          };
        }
      });
    } catch (e) {
      // 跨域样式表可能无法访问，忽略即可
    }
  });

  // 提取表格单元格数据和对应样式
  const table = doc.querySelector('table');
  if (!table) return;

  const pastedRows = Array.from(table.querySelectorAll('tr')).map(row => {
    return Array.from(row.querySelectorAll('td, th')).map(cell => {
      const cellStyle = xlClassStyles[cell.className] || {
        isBold: false,
        isItalic: false,
        hasUnderline: false
      };
      return {
        content: cell.textContent?.trim() || '',
        ...cellStyle
      };
    });
  });

  // 将pastedRows存入组件state，用于后续渲染React表格
  console.log('处理后的粘贴数据:', pastedRows);
};

步骤2：在React表格中应用样式 #

拿到处理后的pastedRows数据后，渲染表格时根据每个单元格的样式状态设置inline样式或自定义类：

{/* 假设pastedRows是组件state中的数据 */}
<table>
  <tbody>
    {pastedRows.map((row, rowIdx) => (
      <tr key={rowIdx}>
        {row.map((cell, cellIdx) => (
          <td
            key={cellIdx}
            style={{
              fontWeight: cell.isBold ? 'bold' : 'normal',
              fontStyle: cell.isItalic ? 'italic' : 'normal',
              textDecoration: cell.hasUnderline ? 'underline' : 'none'
            }}
          >
            {cell.content}
          </td>
        ))}
      </tr>
    ))}
  </tbody>
</table>

关键说明 #

• Excel生成的xlxx类名是动态的，不同场景下同一类名可能对应不同样式，绝对不能硬编码类名和样式的对应关系，必须从HTML的<style>标签中提取规则。
• 解析样式表时可能遇到跨域限制，但Excel复制的样式都是内联在HTML的<style>里的，不会影响正常提取。
• 必须调用event.preventDefault()阻止默认粘贴行为，避免浏览器直接粘贴纯文本或原始HTML干扰自定义渲染。

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