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

Question

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

例如

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

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

我主要使用 React 和各种 npm（还是初学者）

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

下面是 mailchimp 的图片：

Answer 1

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

您可以通过 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>

希望对你有所帮助。

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

How to allow user to paste spreadsheet data (multiple columns) into a textarea

textarea

input

reactjs