在 JavaScript 中导出 CSV 文件时在没有空白单元格的行之间创建换行符答案

【问题标题】：Create a line break between rows without blank cell when exporting a CSV file in JavaScript在 JavaScript 中导出 CSV 文件时在没有空白单元格的行之间创建换行符
【发布时间】：2021-10-08 02:49:33
【问题描述】：

以下是我在 JS 中将数据导出到 CSV 文件的脚本。所有数据都作为一个名为 arrayPulledFromServer 的数组拉入。有了这个，我试图将其中的每个用户数据分成 CSV 中的行。每个用户只有三个值，所以当它达到 3 个限制时它会被切断。从那里我将新用户信息推送到另一个名为 row 的数组中。

  var masterCSV: any[] = [];
  var row: any[] = [];

    arrayPulledFromServer?.map((record) => {
      masterCSV.push(
        [record.name],
        [record.age],
        [record.city]        
      );
      row.push(masterCSV);

      if (masterCSV.length == 3) {
        row.push('\n');
        masterCSV = [];
      }
    });

    const rows = [
      [
        "Full Name",
        "Age",
        "City"
      ],
      [row],
    ];

    let csvContent =
      "data:text/csv;charset=utf-8," + rows.map((e) => e.join(",")).join("\n");
    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "records.csv");
    document.body.appendChild(link);
    link.click();
  };

这段代码工作正常，但是当我按原样导出时，第二行向内缩进一个空格：末尾还有各种空白单元格。

我尝试使用\u2028 代替\n，但没有看到任何结果。当我打印整个数组时，它不显示任何空格，只显示'\ n'。如果您能就清理此导出提供任何建议，我将不胜感激。

【问题讨论】：

标签： javascript typescript csv

【解决方案1】：

将问题分解。

了解您的数据
了解您的专栏
根据您的列和数据构建矩阵
将矩阵转换为以逗号分隔的值的行分隔列表
将href 设置为适当的字符串

const data = [
  { name: 'John' , age: 18 , city: 'Chicago'  },
  { name: 'Ben'  , age: 19 , city: 'New York' }
];

const cols = [
  { field: 'name' , text: 'Full Name' },
  { field: 'age'  , text: 'Age'       },
  { field: 'city' , text: 'City'      }
];

const toMatrix = (data, columns) => [
  columns.map(col => col.text),
  ...data.map(record => columns.map(col => record[col.field]))
];

const toCsv = (data, columns, delim = ',') =>
  toMatrix(data, cols).map(row => row.join(delim)).join('\n');

const download = (data, columns) => {
  const csvContent = `data:text/csv;charset=utf-8,${toCsv(data, cols)}`;
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement('a');
  link.setAttribute('href', encodedUri);
  link.setAttribute('download', 'records.csv');
  document.body.appendChild(link);
  link.click();
}

download(data, cols);

【讨论】：

【解决方案2】：

我运行了您的解决方案，发现除了标题之外的每一行都在实际行数据之前以 , 为前缀。这意味着每一行都有一个空单元格。

问题在于数组的操作方式。我帮忙修好了。

// rows is an array of arrays with the structure
// [
//    [name1, age1, city1],
//    [name2, age2, city2]
// ]
var rows: any[] = [];

// some dummy data
const arrayPulledFromServer = [
    { name: "John", age: 45, city: "City 1" },
    { name: "Klar", age: 23, city: "City 2" },
    { name: "Poll", age: 31, city: "City 3" },
];

arrayPulledFromServer?.map((record) => {
    // push a new row
    rows.push([
        record.name,
        record.age,
        record.city,
    ]);
});

// prepend the headers
rows.unshift([
    "Full Name",
    "Age",
    "City"
]);

let csvContent =
    "data:text/csv;charset=utf-8," + rows.map((e) => e.join(",")).join("\n");
var encodedUri = encodeURI(csvContent);
console.log(csvContent);

这应该适合你。

【讨论】：