Vue实现HTML表格复制 Chrome/Firefox粘贴Excel格式不一致

问题现象 #

需要实现HTML表格第二行（数据行）的复制功能，要求复制后粘贴到Excel时，单个HTML表格单元格内容对应单个Excel单元格，现有实现存在以下问题：

• 代码在Firefox浏览器运行完全正常，但Chrome浏览器下粘贴到Excel时单元格无法正常匹配，仅保留表格单元格内的HTML内容
• 如果将ref绑定到整个<table>元素上，复制功能可正常运行，但复制结果会包含不需要的表头内容，不符合需求
• 基于Clipboard API编写的专用复制函数可完成复制操作，但无法保留和Firefox版本一致的单元格布局

原有功能实现代码：

<script setup>
import {ref} from 'vue'
let matable = [
{ "name": "Link pic", "id": 34, "champ": "<p> Here is a link: <a href='www.google.com'> Link image</a>  <br><br>" },
{ "name": "Source", "id": 16, "champ": "electricity" }, 
{ "name": "Generator", "id": 15, "champ": "Chaudière" }, 
{ "name": "Canton", "id": 1, "champ": "GE" }, 
{ "name": "City", "id": 2, "champ": "Paris" }, 
{ "name": "Numéro de rue", "id": 3, "champ": "72" }, 
{ "name": "Nom de rue", "id": 4, "champ": "Rue du Président" }, 
{ "name": "Surface facades", "id": 36, "champ": 2175.42 },
 ]

const elTable = ref(null)
defineExpose({ elTable });
function selectElementContents(){

let range, sel;

if (document.createRange && window.getSelection) {

range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();

try {
range.selectNodeContents(elTable.value);
sel.addRange(range);
} catch (e) {
range.selectNode(elTable.value);
sel.addRange(range);
}

document.execCommand('copy');


}
}


</script>

<template>
<h1>Hello Vue 3</h1>
<table ref="elTable">
    <thead>
            <th
            v-for="ma in matable"
            :key="ma.id">
            {{ ma.name}}
            </th>
    </thead>
    <tbody >
        <tr >
            <td v-for="ma in matable"
            :key="ma.id"
            v-html="ma.champ"
            >
            </td>
        </tr>
    </tbody>
  </table>
  <input type="button" value="Copier" class="button is-dark my-1" ref="copy" v-on:click="selectElementContents">

</template>
<style scoped>

</style>

测试失效的Clipboard API代码：

function testCopy(){
  let table = matable.map(a => a.champ);

  let contentCo = table.join("  "); 
  console.log("voici ma table",contentCo)

    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
        if (result.state === 'granted') {
            var blob = new Blob([contentCo], {type: 'text/html'});
            var item = new ClipboardItem({'text/html': blob});
            navigator.clipboard.write([item]).then(function() {
              console.log("Copied to clipboard successfully!");
            }, function(error) {
              console.error("unable to write to clipboard. Error:");
              console.log(error);
            });
        } else {
            console.log("clipboard-permission not granted: " + result);
        }
    })
}

问题原因 #

Chrome对选区复制的HTML格式解析逻辑和Firefox存在差异：当直接选中<tr>行元素内容复制时，Chrome不会自动补全完整的<table>包裹结构，导致Excel识别不到表格边界，只能把内容当成普通HTML文本粘贴，无法拆分到对应单元格。
之前测试的Clipboard API方案失效，是因为仅拼接了单元格文本内容，没有包裹完整的table/tr/td标签层级，Excel识别不到表格结构，自然无法拆分单元格。

修复方案 #

将ref绑定到需要复制的目标数据行（第二行tr），复制时临时构造仅包含目标行的完整table结构写入剪贴板，同时兼容现代Clipboard API和旧版execCommand逻辑，保证双浏览器正常运行，且不会复制多余的表头内容。

1. 模板部分修改：将原来绑定在table上的ref移到需要复制的tr元素上

<table>
    <thead>
            <th
            v-for="ma in matable"
            :key="ma.id">
            {{ ma.name}}
            </th>
    </thead>
    <tbody >
        <!-- ref绑定到需要复制的目标数据行 -->
        <tr ref="elTable">
            <td v-for="ma in matable"
            :key="ma.id"
            v-html="ma.champ"
            >
            </td>
        </tr>
    </tbody>
</table>

2. 复制函数修改：

async function selectElementContents(){
  const targetRow = elTable.value
  if (!targetRow) return

  // 构造完整表格HTML，补全Chrome/Excel识别需要的table、tbody标签，仅包含要复制的目标行
  const copyHtml = `<table><tbody>${targetRow.outerHTML}</tbody></table>`
  // 同步生成制表符分隔的纯文本内容，兼容不支持HTML格式的粘贴场景
  const plainText = Array.from(targetRow.children).map(td => td.innerText.trim()).join('\t')

  try {
    // 优先使用现代Clipboard API，同时写入HTML和纯文本两种格式
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': new Blob([copyHtml], { type: 'text/html' }),
        'text/plain': new Blob([plainText], { type: 'text/plain' })
      })
    ])
  } catch (e) {
    // 兜底兼容不支持Clipboard API的旧浏览器，使用选区复制逻辑
    let range, sel;
    if (document.createRange && window.getSelection) {
      range = document.createRange();
      sel = window.getSelection();
      sel.removeAllRanges();
      try {
        range.selectNodeContents(targetRow);
        sel.addRange(range);
      } catch (err) {
        range.selectNode(targetRow);
        sel.addRange(range);
      }
      document.execCommand('copy');
      // 复制完成后清除页面选区
      sel.removeAllRanges()
    }
  }
}

方案说明 #

• 写入剪贴板的HTML是完整的table包裹的单行结构，Chrome、Firefox和Excel都能正确识别表格边界，粘贴时自动将每个td内容匹配到单个Excel单元格
• 同时写入制表符分隔的纯文本格式，就算粘贴到记事本、WPS等不同环境，也能保持单元格拆分效果
• 不会复制表头内容，完全符合需求
• 不需要在页面上插入额外的临时DOM元素，不会影响现有页面布局

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