如何允许用户将电子表格数据（多列）粘贴到文本区域

Question

我正在开发一个允许用户从电子表格复制数据并粘贴到输入字段（文本区域）的系统。接收到的每一行都应该作为一个包含 x 属性的对象来处理。

例如

{
  emailaddress: xxx@xxx.com,
  firstname: Siri,
  lastname: Hemsley,
  address: 154 Example Dr, Hendersonville NC
}

我看到 Mailchimp 正在使用非常相似的东西，但不确定它是如何完成的。

我主要使用 react 和各种 npms（仍然是初学者）

有什么建议或代码示例可以做到这一点吗？

下面是mailchimp的图片：

Answer 1

如果您从 Google 电子表格复制内容（我不确定 Excel 等），输出会在每个值之间带有标签 \t，在每行之间带有新行 \n。

您可以通过 tabs 和新的 lines 拆分 textarea 值并将其转换为对象。像这样的：

const textArea = document.querySelector('textarea');
textArea.addEventListener('change', (e) => {
  const lines = e.target.value.split('\n')
  lines?.forEach(line => {
    console.log("this is one line", line);
    const values = line.split('\t');
    console.log("values of line", values);
  });
});

<textarea></textarea>

希望对你有所帮助。