vue js - 从剪贴板解析数据 (excel)

Question

我正在尝试解析用户从 excel 文件粘贴的数据。你的代码看起来像这样：

onPastingContacts(e) {
  const pastedData = e.clipboardData.getData('Text');
  const allPastedFields = pastedData.split('\n').filter(el => el !== '');
  allPastedFields.forEach(el => {
    const field = el.split('\t');
    let element = {
      'field1': field[0]?.replace(/\r/g, ''),
      'field2': field[1]?.replace(/\r/g, ''),
      'field3': field[2]?.replace(/\r/g, ''),
      'field4': field[3]?.replace(/\r/g, ''),
      'field5': field[4]?.replace(/\r/g, ''),
      'field6': field[5]?.replace(/\r/g, '')
    };
    Object.keys(element).forEach((key) => (element[key] == null) && delete element[key]); // remove empty fields from object
    Data.push(element)
  });
  return {Data}
},

一般情况下效果很好，问题是文件是否包含带有“\n”或“\t”的文本它将它解析为文件中的新行（或者如果它是一个新单元格）。

例如，如果我要粘贴此文件：

如果我打印粘贴的数据，它看起来像这样：

523961234 "This is an example with new line "

如果我打印数据数组，它看起来像这样：

[{field1: '523961234', field2: 'This is an example'},
{field1: 'with new line '}]

我需要这将是结果：

[{field1: '523961234', field2: 'This is an example \n with new line '}]

我知道为什么它是 append ，有没有人知道我如何以它的工作方式进行解析？

Answer 1

您可以做的是删除所有 in-between 引号处的新行。您可以使用此 RegEx /\n+(?=(?:(?!\"|\").)*\")/gs 来查找这些新行。所以行

onPastingContacts(e) {
  const pastedData = e.clipboardData.getData('Text');
  const regEx = /\n+(?=(?:(?!\"|\").)*\")/gs;
  const allPastedFields = pastedData.replaceAll(regEx, " ").split('\n').filter(el => el !== '');
  // Rest of your code here.
}

注意：如果您需要在每个字段中保留换行符，您可以用占位符替换换行符 - 示例 .replaceAll(regEx,'{NEW_LINE}')。然后，当您解析该字段时，您可以将其替换为新行 - 示例 .replaceAll('{NEW_LINE}', '\n').

原始 RegEx 灵感 here。

Answer 2

我按“\r\n”拆分。这对我有用。单元格内的新行只是 \n 。这是我的代码：

onPastingContacts(e) {
  const pastedData = e.clipboardData.getData('Text');
  const allPastedFields = pastedData.split('\r\n').filter(el => el !== '');
  allPastedFields.forEach(el => {
    const field = el.split('\t');
    let element = {
      'field1': field[0]?.replace(/\r/g, ''),
      'field2': field[1]?.replace(/\r/g, ''),
      'field3': field[2]?.replace(/\r/g, ''),
      'field4': field[3]?.replace(/\r/g, ''),
      'field5': field[4]?.replace(/\r/g, ''),
      'field6': field[5]?.replace(/\r/g, '')
    };
    Object.keys(element).forEach((key) => (element[key] == null) && delete element[key]); // remove empty fields from object
    Data.push(element)
  });
  return {Data}
},

vue js - 从剪贴板解析数据 (excel)

vue js - parsing data from clipbord (excel)

javascript

excel

clipboard

parsing

vue.js