求助：浏览器插入事件中获取Excel复制的完整单元格结构数据

要实现像Google表格那样完整保留Excel复制数据的单元格结构，核心是不要依赖浏览器默认的纯文本剪贴板数据，而是读取Excel复制到剪贴板时附带的HTML或CSV格式数据，这些格式会完整保留空单元格的位置信息。

实现步骤 #

• 监听paste事件并阻止默认行为，避免浏览器自动处理空单元格
• 从剪贴板中优先读取HTML格式数据（Excel复制的HTML包含完整表格结构）
• 解析HTML表格提取所有单元格内容（包括空单元格）
• 用解析后的结果填充表单

示例代码 #

document.addEventListener('paste', function(e) {
  e.preventDefault(); // 阻止浏览器默认粘贴处理

  const clipboardData = e.clipboardData || window.clipboardData;
  if (!clipboardData) return;

  // 优先获取HTML格式（Excel复制的HTML会保留完整单元格结构）
  const htmlContent = clipboardData.getData('text/html');
  if (htmlContent) {
    parseExcelHTML(htmlContent);
    return;
  }

  // fallback到CSV格式
  const csvContent = clipboardData.getData('text/plain');
  if (csvContent) {
    parseExcelCSV(csvContent);
  }
});

function parseExcelHTML(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const targetRow = doc.querySelector('tr'); // 取复制的第一行数据
  if (!targetRow) return;

  // 提取所有单元格（包括<th>表头和<td>单元格）
  const cells = targetRow.querySelectorAll('td, th');
  const cellValues = Array.from(cells).map(cell => cell.textContent.trim() || '');
  
  // 填充表单逻辑，根据你的表单字段顺序调整
  populateFormFields(cellValues);
}

function parseExcelCSV(csv) {
  // Excel生成的CSV会用逗号保留空单元格占位
  const firstRow = csv.split('\n')[0].trim();
  if (!firstRow) return;

  const cellValues = firstRow.split(',').map(val => val.trim() || '');
  populateFormFields(cellValues);
}

function populateFormFields(values) {
  // 示例：按顺序填充文本输入框
  const formInputs = document.querySelectorAll('form input[type="text"]');
  formInputs.forEach((input, index) => {
    input.value = values[index] ?? '';
  });
}

关键说明 #

• Excel复制到剪贴板时会同时存储多种格式：纯文本（会合并空单元格）、HTML（完整表格结构）、CSV（逗号分隔保留空单元格）。优先用HTML是因为它的结构最可靠，能准确对应每个单元格的位置。
• 解析HTML时，空单元格会对应一个空的<td>元素，cell.textContent.trim() || ''会把空单元格转为空字符串，保留在数组中。
• 不同浏览器的剪贴板API可能有细微差异，加入CSV作为fallback可确保兼容性。

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