从Excel复制文本粘贴至浏览器功能的可配置实现方案咨询

采用无额外依赖的CSV文本作为配置载体，所有操作都在前端完成，员工无需安装任何额外软件，仅用系统自带记事本即可修改配置，原有复制功能逻辑可以完全复用。

直接使用两列CSV格式作为配置文件，学习成本极低，普通员工仅需按格式填写即可：

评论标签,复制内容
Comment 1,This is the text to copy
审批通过,本次申请材料齐全，符合流程要求
驳回申请,缺少签字扫描件，请补充后重新提交
加急处理,已标记为加急任务，优先处理

注意：如果复制内容里包含逗号，只需用英文双引号把整段内容包裹即可，示例：Comment 2,"内容包含,逗号的情况"

原有硬编码的表格直接替换为动态渲染逻辑，仅需新增3部分代码即可完成改造：

• 新增配置文件上传/拖入入口，也可以默认加载同目录下的default.csv作为默认配置，员工无需每次手动上传
• 新增CSV解析逻辑，无需引入第三方依赖，纯JS即可实现兼容常见场景的解析功能：

function parseCSV(csvText) {
  // 过滤空行
  const validLines = csvText.split('\n').filter(line => line.trim().length > 0)
  // 跳过第一行表头，逐行解析
  return validLines.slice(1).map(line => {
    // 兼容带双引号的转义内容
    const columns = line.match(/(".*?"|[^",]+)(?=\s*,|\s*$)/g) || []
    return {
      label: columns[0]?.replace(/^"|"$/g, '').trim() || '未命名标签',
      content: columns[1]?.replace(/^"|"$/g, '').trim() || '无内容'
    }
  })
}

• 新增动态渲染表格逻辑，替换原有硬编码的HTML内容：

function renderCommentTable(configList) {
  const table = document.querySelector('#comment-table')
  // 清空原有硬编码内容
  table.innerHTML = ''
  // 逐行生成表格
  configList.forEach(item => {
    const row = document.createElement('tr')
    row.innerHTML = `
      <td style="width: 30%">${item.label}</td>
      <td style="width: 60%">${item.content}</td>
      <td style="width: 10%"><button class="copy-btn">复制</button></td>
    `
    // 绑定复制事件
    row.querySelector('.copy-btn').addEventListener('click', async () => {
      await navigator.clipboard.writeText(item.content)
      const originText = this.textContent
      this.textContent = '成功'
      setTimeout(() => this.textContent = originText, 1500)
    })
    table.appendChild(row)
  })
}

• 支持配置导出功能，员工修改完配置后可以直接导出CSV文件分享给同部门同事，无需手动同步
• 支持多套配置本地存储，不同部门的配置可以保存在浏览器本地缓存中，下次打开页面直接切换即可
• 新增配置校验逻辑，上传配置文件时自动检查格式错误，给出明确的错误位置提示，避免解析失败

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